feat: 完善 resolver 自动按需加载器

package/component/src/component/breadcrumbItem/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/carouselItem/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/checkboxGroup/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/col/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/collapse/index.less

@@ -5,3 +5,38 @@
   border-style: solid;
   border-radius: 2px;
 }
+
+.layui-colla-content,
+.layui-colla-item {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+.layui-colla-item:first-child {
+  border-top: none;
+}
+
+.layui-colla-title {
+  position: relative;
+  height: 42px;
+  line-height: 42px;
+  padding: 0 15px 0 35px;
+  color: #333;
+  background-color: @global-neutral-color-1;
+  cursor: pointer;
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.layui-colla-content {
+  padding: 10px 15px;
+  line-height: 1.6;
+  color: #666;
+}
+
+.layui-colla-icon {
+  position: absolute;
+  left: 15px;
+  top: 0;
+  font-size: 14px;
+}

package/component/src/component/collapseItem/index.less

@@ -1,36 +0,0 @@
-@import (reference) "../../theme/variable.less";
-
-.layui-colla-content,
-.layui-colla-item {
-  border-top-width: 1px;
-  border-top-style: solid;
-}
-
-.layui-colla-item:first-child {
-  border-top: none;
-}
-
-.layui-colla-title {
-  position: relative;
-  height: 42px;
-  line-height: 42px;
-  padding: 0 15px 0 35px;
-  color: #333;
-  background-color: @global-neutral-color-1;
-  cursor: pointer;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.layui-colla-content {
-  padding: 10px 15px;
-  line-height: 1.6;
-  color: #666;
-}
-
-.layui-colla-icon {
-  position: absolute;
-  left: 15px;
-  top: 0;
-  font-size: 14px;
-}

package/component/src/component/collapseItem/index.vue

@@ -5,7 +5,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import "./index.less";
 import LayTransition from "../transition/index.vue";
 import { withDefaults, inject, computed, ref } from "vue";
 

package/component/src/component/countUp/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/datePicker/index.vue

@@ -264,6 +264,7 @@
 <script lang="ts" setup>
 import { ref, watch, computed, defineProps, defineEmits, onMounted } from "vue";
 
+import "./index.less";
 import dayjs from "dayjs";
 import LayIcon from "../icon/index";
 import LayInput from "../input/index.vue";

package/component/src/component/dropdown/index.less

@@ -27,3 +27,33 @@
 .layui-dropdown-up > dl {
   display: block;
 }
+
+
+.layui-menu {
+  position: relative;
+  background-color: #fff;
+}
+
+.layui-menu li,
+.layui-menu-body-title a {
+  padding: 5px 15px;
+}
+
+.layui-menu li {
+  position: relative;
+  line-height: 26px;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.layui-menu li:hover {
+  background-color: var(--global-neutral-color-2);
+}
+
+.layui-menu-body-title {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/component/src/component/dropdown/index.vue

@@ -25,6 +25,7 @@ const dropdownRef = ref<null | HTMLElement>(null);
 const dropdownX = ref<number | string>(0);
 const dropdownY = ref<number | string>("auto");
 
+// @ts-ignore
 onClickOutside(dropdownRef, (event) => {
   openState.value = false;
 });

package/component/src/component/dropdownMenuItem/index.less

@@ -1 +0,0 @@
-@import (reference) "../../theme/variable.less";

package/component/src/component/form/index.less

@@ -77,3 +77,52 @@
   .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
     margin-top: 10px;
   }
+
+  .layui-required {
+    color: #ff5722;
+    font-size: 12px;
+    line-height: 1;
+  }
+  
+  .layui-form .layui-form-item {
+    .layui-input-block,
+    .layui-input-inline {
+      .layui-form-danger {
+        &,
+        .layui-input {
+          border-color: #ff5722 !important;
+        }
+      }
+    }
+  }
+  
+  .layui-error-message {
+    color: #ff5722;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 5px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+  }
+  
+  .layui-error-message-anim {
+    -ms-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-animation: layui-top-show-anim 0.3s ease 1;
+    animation: layui-top-show-anim 0.3s ease 1;
+  }
+  
+  @keyframes layui-top-show-anim {
+    0% {
+      opacity: 0.3;
+      transform: rotateX(45deg);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: rotateX(0);
+    }
+  }
+  

package/component/src/component/formItem/index.less

@@ -1,51 +0,0 @@
-@import (reference) "../../theme/variable.less";
-
-@error_color: red;
-
-.layui-required {
-  color: @error_color;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.layui-form .layui-form-item {
-  .layui-input-block,
-  .layui-input-inline {
-    .layui-form-danger {
-      &,
-      .layui-input {
-        border-color: #ff5722 !important;
-      }
-    }
-  }
-}
-
-.layui-error-message {
-  color: @error_color;
-  font-size: 12px;
-  line-height: 1;
-  padding-top: 5px;
-  position: absolute;
-  top: 100%;
-  left: 0;
-}
-
-.layui-error-message-anim {
-  -ms-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-  -webkit-animation: layui-top-show-anim 0.3s ease 1;
-  animation: layui-top-show-anim 0.3s ease 1;
-}
-
-@keyframes layui-top-show-anim {
-  0% {
-    opacity: 0.3;
-    transform: rotateX(45deg);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotateX(0);
-  }
-}

package/component/src/component/formItem/index.vue

@@ -5,7 +5,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import "./index.less";
 import {
   inject,
   withDefaults,

package/component/src/resolver/index.ts

@@ -7,58 +7,6 @@
  */
 const matchComponents = [
   // done
-  {
-    pattern: /^LayButton$/,
-    styleDir: "button",
-  },
-  {
-    pattern: /^LayButtonContainer$/,
-    styleDir: "container",
-  },
-  {
-    pattern: /^LayButtonGroup$/,
-    styleDir: "buttonGroup",
-  },
-  {
-    pattern: /^LayContainer$/,
-    styleDir: "container",
-  },
-  {
-    pattern: /^LayCard$/,
-    styleDir: "card",
-  },
-  {
-    pattern: /^LayPanel$/,
-    styleDir: "panel",
-  },
-  {
-    pattern: /^LayFooter$/,
-    styleDir: "footer",
-  },
-  {
-    pattern: /^LayBody$/,
-    styleDir: "body",
-  },
-  {
-    pattern: /^LayEmpty$/,
-    styleDir: "empty",
-  },
-  {
-    pattern: /^LayBadge$/,
-    styleDir: "badge",
-  },
-  {
-    pattern: /^(LayHeader)$/,
-    styleDir: "header",
-  },
-  {
-    pattern: /^LayLogo$/,
-    styleDir: "logo",
-  },
-  {
-    pattern: /^LayLayout$/,
-    styleDir: "layout",
-  },
   {
     pattern: /^LayAvatar$/,
     styleDir: "avatar",
@@ -68,12 +16,16 @@ const matchComponents = [
     styleDir: "avatar",
   },
   {
-    pattern: /^LayRow$/,
+    pattern: /^LayBackTop$/,
-    styleDir: "row",
+    styleDir: "backTop",
   },
   {
-    pattern: /^LayCol$/,
+    pattern: /^LayBadge$/,
-    styleDir: "row",
+    styleDir: "badge",
+  },
+  {
+    pattern: /^LayBody$/,
+    styleDir: "body",
   },
   {
     pattern: /^LayBreadcrumb$/,
@@ -84,20 +36,212 @@ const matchComponents = [
     styleDir: "breadcrumb",
   },
   {
-    pattern: /^LayScroll$/,
+    pattern: /^LayButton$/,
-    styleDir: "scroll",
+    styleDir: "button",
   },
   {
-    pattern: /^LayResult$/,
+    pattern: /^LayButtonContainer$/,
-    styleDir: "result",
+    styleDir: "buttonContainer",
+  },
+  {
+    pattern: /^LayButtonGroup$/,
+    styleDir: "buttonGroup",
+  },
+  {
+    pattern: /^LayCard$/,
+    styleDir: "card",
+  },
+  {
+    pattern: /^(LayCarouselItem)$/,
+    styleDir: "carousel",
+  },
+  {
+    pattern: /^(LayCarousel)$/,
+    styleDir: "carousel",
+  },
+  {
+    pattern: /^(LayCheckboxGroup)$/,
+    styleDir: "checkbox",
+  },
+  {
+    pattern: /^(LayCheckbox)$/,
+    styleDir: "checkbox",
+  },
+  {
+    pattern: /^LayRow$/,
+    styleDir: "row",
+  },
+  {
+    pattern: /^LayCol$/,
+    styleDir: "row",
+  },
+  {
+    pattern: /^(LayCollapseItem)$/,
+    styleDir: "collapse",
+  },
+  {
+    pattern: /^(LayCollapse)$/,
+    styleDir: "collapse",
+  },
+  {
+    pattern: /^(LayColorPicker)$/,
+    styleDir: "colorPicker",
+  },
+  {
+    pattern: /^LayContainer$/,
+    styleDir: "container",
+  },
+  {
+    pattern: /^LayCountUp$/,
+    styleDir: "",
+  },
+  {
+    pattern: /^LayDatePicker$/,
+    styleDir: "datePicker",
+  },
+  {
+    pattern: /^(LayDropdownMenuItem)$/,
+    styleDir: "dropdown",
+  },
+  {
+    pattern: /^(LayDropdownMenu)$/,
+    styleDir: "dropdown",
+  },
+  {
+    pattern: /^(LayDropdown)$/,
+    styleDir: "dropdown",
+  },
+  {
+    pattern: /^LayEmpty$/,
+    styleDir: "empty",
+  },
+  {
+    pattern: /^LayException$/,
+    styleDir: "exception",
+  },
+  {
+    pattern: /^LayField$/,
+    styleDir: "field",
+  },
+  {
+    pattern: /^LayFooter$/,
+    styleDir: "footer",
+  },
+  {
+    pattern: /^(LayFormItem)$/,
+    styleDir: "form",
+  },
+  {
+    pattern: /^(LayForm)$/,
+    styleDir: "form",
+  },
+  {
+    pattern: /^(LayFullscreen)$/,
+    styleDir: "fullscreen",
+  },
+  {
+    pattern: /^(LayHeader)$/,
+    styleDir: "header",
+  },
+  {
+    pattern: /^(LayIconPicker)$/,
+    styleDir: "iconPicker",
+  },
+  {
+    pattern: /^(LayInput)$/,
+    styleDir: "input",
+  },
+  {
+    pattern: /^(LayInputNumber)$/,
+    styleDir: "inputNumber",
+  },
+  {
+    pattern: /^LayLayout$/,
+    styleDir: "layout",
+  },
+  {
+    pattern: /^LayLine$/,
+    styleDir: "line",
+  },
+  {
+    pattern: /^LayLogo$/,
+    styleDir: "logo",
+  },
+  {
+    pattern: /^(LayMenu|LayMenuItem|LaySubMenu)$/,
+    styleDir: "menu",
   },
   {
     pattern: /^LayNoticeBar$/,
     styleDir: "noticeBar",
   },
   {
-    pattern: /^LayLine$/,
+    pattern: /^LayPage$/,
-    styleDir: "line",
+    styleDir: "page",
+  },
+  {
+    pattern: /^LayPanel$/,
+    styleDir: "panel",
+  },
+  {
+    pattern: /^LayProgress$/,
+    styleDir: "progress",
+  },
+  {
+    pattern: /^LayQuote$/,
+    styleDir: "quote",
+  },
+  {
+    pattern: /^LayRadio$/,
+    styleDir: "radio",
+  },
+  {
+    pattern: /^LayRate$/,
+    styleDir: "rate",
+  },
+  {
+    pattern: /^LayResult$/,
+    styleDir: "result",
+  },
+  {
+    pattern: /^LayRipple$/,
+    styleDir: "ripple",
+  },
+  {
+    pattern: /^LayScroll$/,
+    styleDir: "scroll",
+  },
+  {
+    pattern: /^LaySelectOption$/,
+    styleDir: "select",
+  },
+  {
+    pattern: /^LaySelect$/,
+    styleDir: "select",
+  },
+  {
+    pattern: /^LaySide$/,
+    styleDir: "side",
+  },
+  {
+    pattern: /^LaySkeletonItem$/,
+    styleDir: "skeleton",
+  },
+  {
+    pattern: /^LaySkeleton$/,
+    styleDir: "skeleton",
+  },
+  {
+    pattern: /^LaySlider$/,
+    styleDir: "slider",
+  },
+  {
+    pattern: /^LaySplitPanelItem$/,
+    styleDir: "splitPanel",
+  },
+  {
+    pattern: /^LaySplitPanel$/,
+    styleDir: "splitPanel",
   },
   {
     pattern: /^LayStepItem$/,
@@ -107,77 +251,50 @@ const matchComponents = [
     pattern: /^LayStep$/,
     styleDir: "step",
   },
-  // ....
-  {
-    pattern: /^(LayCarousel|LayCarouselItem)$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^(LayCheckbox|LayCheckboxGroup)$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^(LayCollapse|LayCollapseItem)$/,
-    styleDir: "",
-  },
-  // 无 css
-  {
-    pattern: /^LayCountUp$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^(LayDropdown|LayDropdownItem)$/,
-    styleDir: "",
-  },
-  // 可能有未拆分的
-  {
-    pattern: /^(LayForm|LayFormItem)$/,
-    styleDir: "formItem",
-  },
-  {
-    pattern: /^(LayMenuItem|LaySubMenu)$/,
-    styleDir: "menu",
-  },
-  {
-    pattern: /^LayPage$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^LayProgress$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^LayRadio$/,
-    styleDir: "",
-  },
-  {
-    pattern: /^LaySelectOption$/,
-    styleDir: "select",
-  },
-  {
-    pattern: /^LaySkeletonItem$/,
-    styleDir: "skeleton",
-  },
-  {
-    pattern: /^LaySplitPanelItem$/,
-    styleDir: "splitPanel",
-  },
   {
     pattern: /^LaySwitch$/,
-    styleDir: "",
+    styleDir: "switch",
   },
   {
     pattern: /^(LayTab|LayTabItem)$/,
-    styleDir: "",
+    styleDir: "tab",
+  },
+  {
+    pattern: /^(LayTable)$/,
+    styleDir: "table",
+  },
+  {
+    pattern: /^(LayTextarea)$/,
+    styleDir: "textarea",
   },
   {
     pattern: /^LayTimelineItem$/,
     styleDir: "timeline",
   },
+  {
+    pattern: /^LayTimeline$/,
+    styleDir: "timeline",
+  },
   {
     pattern: /^LayTolltip$/,
     styleDir: "popper",
   },
+  {
+    pattern: /^LayTransfer$/,
+    styleDir: "transfer",
+  },
+  {
+    pattern: /^LayTransition$/,
+    styleDir: "transition",
+  },
+  {
+    pattern: /^LayTree$/,
+    styleDir: "tree",
+  },
+  {
+    pattern: /^LayUpload$/,
+    styleDir: "upload",
+  },
 ];
 
 export interface LayuiVueResolverOptions {

package/component/src/theme/index.less

@@ -1,206 +1,2 @@
 @import "./variable.less";
 @import "./public.less";
-@import "./date.less";
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-}
-
-a,
-body {
-  color: #333;
-}
-
-li {
-  list-style: none;
-}
-
-.layui-inline {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.layui-btn,
-.layui-edge,
-.layui-inline {
-  vertical-align: middle;
-}
-
-.layui-elip,
-.layui-form-checkbox span,
-.layui-form-pane .layui-form-label {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body,
-button,
-dd,
-div,
-dl,
-dt,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-input,
-li,
-ol,
-p,
-pre,
-td,
-textarea,
-th,
-ul {
-  margin: 0;
-  padding: 0;
-}
-
-img {
-  border: none;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-h4,
-h5,
-h6 {
-  font-size: 100%;
-}
-
-button,
-input,
-optgroup,
-option,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  outline: 0;
-}
-
-body {
-  line-height: 1.6;
-  color: rgba(0, 0, 0, 0.85);
-  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
-}
-
-hr {
-  padding: 0;
-  line-height: 0;
-  margin: 10px 0;
-  border: none !important;
-  border-bottom: 1px solid #EEEEEE!important;
-  clear: both;
-  background: 0 0;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:hover {
-  color: #777;
-}
-
-.layui-border-box,
-.layui-border-box * {
-  box-sizing: border-box;
-}
-
-.layui-btn,
-.layui-btn-group,
-.layui-edge {
-  display: inline-block;
-}
-
-.layui-disabled,
-.layui-disabled:hover {
-  color: @global-neutral-color-6 !important;
-  cursor: not-allowed !important;
-}
-
-.layui-btn,
-.layui-input,
-.layui-select,
-.layui-textarea,
-.layui-upload-button {
-  outline: 0;
-  -webkit-appearance: none;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-  box-sizing: border-box;
-}
-
-.layui-form-label,
-.layui-form-mid,
-.layui-input-block,
-.layui-input-inline,
-.layui-input-wrap,
-.layui-textarea {
-  position: relative;
-}
-
-.layui-border,
-.layui-colla-content,
-.layui-colla-item,
-.layui-collapse,
-.layui-form-pane .layui-form-item[pane],
-.layui-form-pane .layui-form-label,
-.layui-iconpicker,
-.layui-iconpicker-main,
-.layui-input-split,
-.layui-layedit,
-.layui-layedit-tool,
-.layui-quote-nm,
-.layui-tab-bar,
-.layui-tab-card,
-.layui-tab-title,
-.layui-tab-title .layui-this:after {
-  border-color: @global-neutral-color-3;
-}
-
-.layui-form input[type="checkbox"],
-.layui-form input[type="radio"],
-.layui-form select {
-  display: none;
-}
-
-.layui-form-checkbox,
-.layui-form-checkbox *,
-.layui-form-switch {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.layui-iconpicker-list li,
-.layui-keyboard-list li,
-.layui-menu li,
-.layui-menu-body-title a:hover,
-.layui-menu-body-title > .layui-icon:hover {
-  transition: all 0.3s;
-}
-
-.layui-colorpicker-alpha-slider,
-.layui-colorpicker-side-slider,
-.layui-menu *,
-.layui-menu,
-.layui-nav {
-  box-sizing: border-box;
-}

package/component/src/theme/public.less

@@ -1,4 +1,207 @@
-// 三角符号 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+}
+
+a,
+body {
+  color: #333;
+}
+
+li {
+  list-style: none;
+}
+
+.layui-inline {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-btn,
+.layui-edge,
+.layui-inline {
+  vertical-align: middle;
+}
+
+.layui-elip,
+.layui-form-checkbox span,
+.layui-form-pane .layui-form-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+p,
+dd,
+dl,
+dt,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+ol,
+td,
+th,
+pre,
+div,
+form,
+body,
+input,
+button,
+textarea {
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  border: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+
+button,
+input,
+optgroup,
+option,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  outline: 0;
+}
+
+body {
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.85);
+  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
+}
+
+hr {
+  padding: 0;
+  line-height: 0;
+  margin: 10px 0;
+  border: none !important;
+  border-bottom: 1px solid #EEEEEE!important;
+  clear: both;
+  background: 0 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  color: #777;
+}
+
+.layui-border-box,
+.layui-border-box * {
+  box-sizing: border-box;
+}
+
+.layui-btn,
+.layui-btn-group,
+.layui-edge {
+  display: inline-block;
+}
+
+.layui-disabled,
+.layui-disabled:hover {
+  color: @global-neutral-color-6 !important;
+  cursor: not-allowed !important;
+}
+
+.layui-btn,
+.layui-input,
+.layui-select,
+.layui-textarea,
+.layui-upload-button {
+  outline: 0;
+  -webkit-appearance: none;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  box-sizing: border-box;
+}
+
+.layui-form-label,
+.layui-form-mid,
+.layui-input-block,
+.layui-input-inline,
+.layui-input-wrap,
+.layui-textarea {
+  position: relative;
+}
+
+.layui-border,
+.layui-colla-content,
+.layui-colla-item,
+.layui-collapse,
+.layui-form-pane .layui-form-item[pane],
+.layui-form-pane .layui-form-label,
+.layui-iconpicker,
+.layui-iconpicker-main,
+.layui-input-split,
+.layui-layedit,
+.layui-layedit-tool,
+.layui-quote-nm,
+.layui-tab-bar,
+.layui-tab-card,
+.layui-tab-title,
+.layui-tab-title .layui-this:after {
+  border-color: @global-neutral-color-3;
+}
+
+.layui-form input[type="checkbox"],
+.layui-form input[type="radio"],
+.layui-form select {
+  display: none;
+}
+
+.layui-form-checkbox,
+.layui-form-checkbox *,
+.layui-form-switch {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-iconpicker-list li,
+.layui-keyboard-list li,
+.layui-menu li,
+.layui-menu-body-title a:hover,
+.layui-menu-body-title > .layui-icon:hover {
+  transition: all 0.3s;
+}
+
+.layui-colorpicker-alpha-slider,
+.layui-colorpicker-side-slider,
+.layui-menu *,
+.layui-menu,
+.layui-nav {
+  box-sizing: border-box;
+}
+
 .layui-edge {
   width: 0;
   border-width: 6px;
@@ -29,7 +232,6 @@
   border-right-style: solid;
 }
 
-// layui display.css
 .layui-show {
   display: block !important;
 }
@@ -38,7 +240,6 @@
   display: none !important;
 }
 
-// 边框样式
 .layui-border,
 .layui-border-black,
 .layui-border-blue,
@@ -80,7 +281,6 @@
   color: #393d49 !important;
 }
 
-// 背景色
 .layui-bg-black,
 .layui-bg-blue,
 .layui-bg-cyan,
@@ -119,7 +319,6 @@
   color: #666 !important;
 }
 
-// 前景色
 .layui-font-red {
   color: #ff5722 !important;
 }
@@ -148,7 +347,6 @@
   color: #c2c2c2 !important;
 }
 
-// 字体尺寸
 .layui-font-12 {
   font-size: 12px !important;
 }
@@ -189,7 +387,6 @@
   font-size: 30px !important;
 }
 
-// 通用动画
 .layui-anim {
   -webkit-animation-duration: 0.3s;
   -webkit-animation-fill-mode: both;

package/document/src/assets/css/index.css

@@ -2,186 +2,37 @@
 @import './markdown.css';
 @import './vars.css';
 
-.layui-menu {
+.layui-menu-lg li {
-    position: relative;
+  line-height: 32px;
-    background-color: #fff;
+}
-  }
 
-  .layui-menu li,
+.layui-menu-lg .layui-menu-body-title a:hover,
-  .layui-menu-body-title a {
+.layui-menu-lg li:hover {
-    padding: 5px 15px;
-  }
-  
-  .layui-menu li {
-    position: relative;
-    line-height: 26px;
-    color: rgba(0, 0, 0, 0.8);
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-  
-  .layui-menu li:hover {
-    background-color: var(--global-neutral-color-2);
-  }
-  
-  .layui-menu-item-parent:hover > .layui-menu-body-panel {
-    display: block;
-    animation-name: layui-fadein;
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-delay: 0.2s;
-  }
-  
-  .layui-menu-item-group .layui-menu-body-title,
-  .layui-menu-item-parent .layui-menu-body-title {
-    padding-right: 25px;
-  }
-  
-  .layui-menu .layui-menu-item-divider:hover,
-  .layui-menu .layui-menu-item-group:hover,
-  .layui-menu .layui-menu-item-none:hover {
   background: 0 0;
-    cursor: default;
+  color: var(--global-checked-color);
-  }
+}
 
-  .layui-menu .layui-menu-item-group > ul {
+.layui-menu-lg li .layui-menu-body-panel {
-    margin: 5px 0 -5px;
+  margin-left: 14px;
-  }
+}
 
-  .layui-menu .layui-menu-item-group > .layui-menu-body-title {
+.layui-menu-lg li .layui-menu-body-panel-left {
-    color: rgba(0, 0, 0, 0.35);
+  margin: 0 15px;
-    user-select: none;
+}
-  }
 
-  .layui-menu .layui-menu-item-none {
+.layui-menu .layui-menu-item-checked,
-    color: rgba(0, 0, 0, 0.35);
+.layui-menu .layui-menu-item-checked2 {
-    cursor: default;
-    text-align: center;
-  }
-  
-  .layui-menu .layui-menu-item-divider {
-    margin: 5px 0;
-    padding: 0;
-    height: 0;
-    line-height: 0;
-    border-bottom: 1px solid var(--global-neutral-color-3);
-    overflow: hidden;
-  }
-  
-  .layui-menu .layui-menu-item-down:hover,
-  .layui-menu .layui-menu-item-up:hover {
-    cursor: pointer;
-  }
-  
-  .layui-menu .layui-menu-item-up > .layui-menu-body-title {
-    color: rgba(0, 0, 0, 0.8);
-  }
-  
-  .layui-menu .layui-menu-item-up > ul {
-    visibility: hidden;
-    height: 0;
-    overflow: hidden;
-  }
-  
-  .layui-menu .layui-menu-item-down:hover > .layui-menu-body-title > .layui-icon,
-  .layui-menu .layui-menu-item-up > .layui-menu-body-title:hover > .layui-icon {
-    color: rgba(0, 0, 0, 1);
-  }
-  
-  .layui-menu .layui-menu-item-down > ul {
-    visibility: visible;
-    height: auto;
-  }
-  
-  .layui-menu .layui-menu-item-checked,
-  .layui-menu .layui-menu-item-checked2 {
   background-color: var(--global-neutral-color-2) !important;
   border-radius: 2px;
+}
+
+.layui-menu .layui-menu-item-checked a,
+.layui-menu .layui-menu-item-checked2 a {
   color: var(--global-checked-color);
-  }
+}
 
-  .layui-menu .layui-menu-item-checked a,
+.layui-menu-body-title a {
-  .layui-menu .layui-menu-item-checked2 a {
-    color: var(--global-checked-color);
-  }
-  
-  .layui-menu .layui-menu-item-checked:after {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border-right: 3px solid var(--global-checked-color);
-    content: "";
-  }
-  
-  .layui-menu-body-title {
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  
-  .layui-menu-body-title a {
   display: block;
   margin: -5px -15px;
   color: rgba(0, 0, 0, 0.8);
-  }
+}
-  
-  .layui-menu-body-title > .layui-icon {
-    position: absolute;
-    right: 0;
-    top: 0;
-    font-size: 14px;
-  }
-  
-  .layui-menu-body-title > .layui-icon-right {
-    right: -1px;
-  }
-  
-  .layui-menu-body-panel {
-    display: none;
-    position: absolute;
-    top: -7px;
-    left: 100%;
-    z-index: 1000;
-    margin-left: 13px;
-    padding: 5px 0;
-  }
-  
-  .layui-menu-body-panel:before {
-    content: "";
-    position: absolute;
-    width: 20px;
-    left: -16px;
-    top: 0;
-    bottom: 0;
-  }
-  
-  .layui-menu-body-panel-left {
-    left: auto;
-    right: 100%;
-    margin: 0 13px;
-  }
-  
-  .layui-menu-body-panel-left:before {
-    left: auto;
-    right: -16px;
-  }
-  
-  .layui-menu-lg li {
-    line-height: 32px;
-  }
-  
-  .layui-menu-lg .layui-menu-body-title a:hover,
-  .layui-menu-lg li:hover {
-    background: 0 0;
-    color: var(--global-checked-color);
-  }
-  
-  .layui-menu-lg li .layui-menu-body-panel {
-    margin-left: 14px;
-  }
-  
-  .layui-menu-lg li .layui-menu-body-panel-left {
-    margin: 0 15px;
-  }