新年的第一次提交

build.less.ts

@@ -0,0 +1,6 @@
+/**
+ * merge less file 
+ * <p>
+ */
+
+

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

@@ -12,7 +12,6 @@
   <lay-button type="normal">百搭按钮</lay-button>
   <lay-button type="warm">暖色按钮</lay-button>
   <lay-button type="danger">警告按钮</lay-button>
-  <lay-button type="disabled">禁用按钮</lay-button>
 </template>
 
 <script>

example/src/components/LayCode.vue

@@ -2,11 +2,11 @@
   <div class="lay-code">
     <div id="source" class="source">
       <slot />
-    </div>
-    <div ref="meta" class="meta">
       <div v-if="$slots.description" class="description">
         <slot name="description" />
       </div>
+    </div>
+    <div ref="meta" class="meta">
       <div class="language-html">
         <slot name="code" />
       </div>
@@ -133,6 +133,7 @@ function handleScroll() {
 }
 .lay-code .source {
   padding: 24px;
+  padding-bottom:15px;
 }
 .lay-code .meta {
   padding: 0 10px;
@@ -141,9 +142,10 @@ function handleScroll() {
   overflow: hidden;
   transition: height 0.2s;
 }
-.lay-code .meta .description {
+.lay-code .source .description {
   padding: 20px;
-  margin: 10px 0;
+  margin: 20px 0;
+  margin-bottom: 0px;
   border: 1px solid whitesmoke;
   box-sizing: border-box;
   background: var(--c-bg);
@@ -152,11 +154,11 @@ function handleScroll() {
   color: var(--c-text-light-1);
   word-break: break-word;
 }
-.lay-code .meta .description p {
+.lay-code .source .description p {
   margin: 0 !important;
   line-height: 26px !important;
 }
-.lay-code .meta .description code {
+.lay-code .source .description code {
   display: inline-block;
   padding: 1px 5px;
   margin: 0 4px;
@@ -167,6 +169,7 @@ function handleScroll() {
   line-height: 18px;
   color: var(--c-text-light);
 }
+
 .lay-code .control {
   height: 44px;
   box-sizing: border-box;

src/component/avatar/index.vue

@@ -10,8 +10,8 @@ import "./index.less";
 
 const props = defineProps<{
   src?: String;
-  radius?: boolean;
   size?: string;
+  radius?: boolean;
 }>();
 </script>
 

src/component/backTop/index.vue

@@ -1,24 +1,3 @@
-<template>
-  <div
-    v-show="visible"
-    ref="backtopRef"
-    class="layui-backtop"
-    :class="classBacktop"
-    :style="{ ...styleBacktop }"
-    @click.stop="handleClick"
-    @mousedown="handlerMousedown"
-    @mouseup="handlerMouseup"
-  >
-    <slot>
-      <lay-icon
-        :type="props.icon"
-        :size="`${props.iconSize}px`"
-        :color="props.iconColor"
-      />
-    </slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayBacktop",
@@ -215,3 +194,24 @@ onMounted(() => {
   scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
 });
 </script>
+
+<template>
+  <div
+    v-show="visible"
+    ref="backtopRef"
+    class="layui-backtop"
+    :class="classBacktop"
+    :style="{ ...styleBacktop }"
+    @click.stop="handleClick"
+    @mousedown="handlerMousedown"
+    @mouseup="handlerMouseup"
+  >
+    <slot>
+      <lay-icon
+        :type="props.icon"
+        :size="`${props.iconSize}px`"
+        :color="props.iconColor"
+      />
+    </slot>
+  </div>
+</template>

src/component/badge/index.vue

@@ -13,6 +13,7 @@ export interface LayBadgeProps {
   theme?: string;
   color?: string;
 }
+
 const props = defineProps<LayBadgeProps>();
 
 const classes = computed(() => {

src/component/body/index.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 
-<script setup name="LayBody" lang="ts">
+<script setup lang="ts">
 import "./index.less";
 </script>
 

src/component/breadcrumbItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayBreadcrumbItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/breadcrumbItem/index.vue

@@ -10,7 +10,13 @@
   <span lay-separator>{{ separator }}</span>
 </template>
 
-<script setup name="LayBreadcrumbItem" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayBreadcrumbItem"
+}
+</script>
+
+<script setup lang="ts">
 import { defineProps, inject, useSlots } from "vue";
 
 const slot = useSlots();

src/component/button/index.less

@@ -1,14 +1,16 @@
+@import "../../theme/variable.less";
+
 .layui-btn {
   height: 38px;
   line-height: 36px;
-  border: 1px solid transparent;
   padding: 0 18px;
-  background-color: #009688;
   color: #fff;
-  white-space: nowrap;
-  text-align: center;
   font-size: 14px;
-  border-radius: 2px;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  background-color: @button-primary-color;
+  border-radius: @button-border-radius;
   cursor: pointer;
 }
 
@@ -44,34 +46,19 @@
 }
 
 .layui-btn-primary:hover {
-  border-color: #009688;
   color: #333;
 }
 
 .layui-btn-normal {
-  background-color: #1e9fff;
+  background-color: @global-normal-color;
 }
 
 .layui-btn-warm {
-  background-color: #ffb800;
+  background-color: @global-warm-color;
 }
 
 .layui-btn-danger {
-  background-color: #ff5722;
+  background-color: @global-danger-color;
-}
-
-.layui-btn-checked {
-  background-color: #5fb878;
-}
-
-.layui-btn-disabled,
-.layui-btn-disabled:active,
-.layui-btn-disabled:hover {
-  border-color: #eee !important;
-  background-color: #fbfbfb !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  opacity: 1;
 }
 
 .layui-btn-lg {
@@ -93,12 +80,21 @@
   line-height: 22px;
   padding: 0 5px;
   font-size: 12px;
-}
+  i {
-
-.layui-btn-xs i {
     font-size: 12px !important;
   }
+}
 
 .layui-btn-fluid {
   width: 100%;
 }
+
+.layui-btn-disabled,
+.layui-btn-disabled:active,
+.layui-btn-disabled:hover {
+  border-color: #eee !important;
+  background-color: #fbfbfb !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  opacity: 1;
+}

src/component/button/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayButton", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/buttonContainer/index.less

@@ -1,16 +1,10 @@
 .layui-btn-container {
   font-size: 0;
-}
+  .layui-btn {
-
-.layui-btn-container .layui-btn {
     margin-right: 10px;
     margin-bottom: 10px;
   }
-
+  .layui-btn + .layui-btn {
-.layui-btn-container .layui-btn + .layui-btn {
     margin-left: 0;
   }
-
-.layui-table .layui-btn-container .layui-btn {
-  margin-bottom: 9px;
 }

src/component/buttonContainer/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayButtonContainer", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/buttonContainer/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="layui-btn-container">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayButtonContainer",
@@ -13,3 +7,9 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 </script>
+
+<template>
+  <div class="layui-btn-container">
+    <slot></slot>
+  </div>
+</template>

src/component/buttonGroup/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayButtonGroup", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/card/index.less

@@ -1,41 +1,24 @@
+@import "../../theme/variable.less";
+
 .layui-card {
   margin-bottom: 15px;
-  border-radius: 2px;
+  border-radius: @card-border-radius;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.layui-card:last-child {
-  margin-bottom: 0;
-}
-
   .layui-card-header {
     height: 42px;
     line-height: 42px;
     padding: 0 15px;
     border-bottom: 1px solid #f6f6f6;
     color: #333;
-  border-radius: 2px 2px 0 0;
     font-size: 14px;
   }
-
   .layui-card-body {
     padding: 10px 15px;
     line-height: 24px;
   }
-
-.layui-card-body[pad15] {
-  padding: 15px;
 }
 
-.layui-card-body[pad20] {
+.layui-card:last-child {
-  padding: 20px;
+  margin-bottom: 0;
-}
-
-.layui-card-body .layui-table {
-  margin: 5px 0;
-}
-
-.layui-card .layui-tab {
-  margin: 0;
 }

src/component/card/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCard ", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/card/index.vue

@@ -1,3 +1,22 @@
+<script lang="ts">
+export default {
+  name: "LayCard"
+}
+</script>
+
+<script setup lang="ts">
+import { useSlots } from "vue";
+import "./index.less";
+
+const slot = useSlots();
+
+export interface LayCardProps {
+  title?: string;
+}
+
+const props = defineProps<LayCardProps>();
+</script>
+
 <template>
   <div class="layui-card">
     <div class="layui-card-header" v-if="slot.header || title">
@@ -10,16 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup name="LayCard" lang="ts">
-import { useSlots } from "vue";
-import "./index.less";
-
-const slot = useSlots();
-
-export interface LayCardProps {
-  title?: string;
-}
-
-const props = defineProps<LayCardProps>();
-</script>

src/component/carousel/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCarousel", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/carousel/index.vue

@@ -1,40 +1,10 @@
-<template>
+<script lang="ts">
-  <div
+export default {
-    class="layui-carousel"
+  name: "LayCarousel"
-    :lay-anim="anim"
+}
-    :lay-indicator="indicator"
+</script>
-    :lay-arrow="arrow"
+
-    :style="{ width: width, height: height }"
+<script setup lang="ts">
-  >
-    <div carousel-item>
-      <slot></slot>
-    </div>
-    <div class="layui-carousel-ind">
-      <ul>
-        <li
-          v-for="ss in slots"
-          :key="ss"
-          :class="[ss.props.id === active ? 'layui-this' : '']"
-          @click.stop="change(ss.props.id)"
-        ></li>
-      </ul>
-    </div>
-    <button
-      class="layui-icon layui-carousel-arrow"
-      lay-type="sub"
-      @click="prev"
-    >
-      {{ anim === "updown" ? "" : "" }}</button
-    ><button
-      class="layui-icon layui-carousel-arrow"
-      lay-type="add"
-      @click="next"
-    >
-      {{ anim === "updown" ? "" : "" }}
-    </button>
-  </div>
-</template>
-<script setup name="LayCarousel" lang="ts">
 import {
   withDefaults,
   defineProps,
@@ -107,3 +77,40 @@ const next = function () {
   }
 };
 </script>
+
+<template>
+  <div
+    class="layui-carousel"
+    :lay-anim="anim"
+    :lay-indicator="indicator"
+    :lay-arrow="arrow"
+    :style="{ width: width, height: height }"
+  >
+    <div carousel-item>
+      <slot></slot>
+    </div>
+    <div class="layui-carousel-ind">
+      <ul>
+        <li
+          v-for="ss in slots"
+          :key="ss"
+          :class="[ss.props.id === active ? 'layui-this' : '']"
+          @click.stop="change(ss.props.id)"
+        ></li>
+      </ul>
+    </div>
+    <button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="sub"
+      @click="prev"
+    >
+      {{ anim === "updown" ? "" : "" }}</button
+    ><button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="add"
+      @click="next"
+    >
+      {{ anim === "updown" ? "" : "" }}
+    </button>
+  </div>
+</template>

src/component/carouselItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCarouselItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/carouselItem/index.vue

@@ -1,9 +1,10 @@
-<template>
+<script lang="ts">
-  <li :class="[active === id ? 'layui-this' : '']">
+export default {
-    <slot></slot>
+  name: "LayCarouselItem"
-  </li>
+}
-</template>
+</script>
-<script setup name="LayCarouselItem" lang="ts">
+
+<script setup lang="ts">
 import { defineProps, inject } from "vue";
 
 const props = defineProps<{
@@ -12,3 +13,9 @@ const props = defineProps<{
 
 const active = inject("active");
 </script>
+
+<template>
+  <li :class="[active === id ? 'layui-this' : '']">
+    <slot></slot>
+  </li>
+</template>

src/component/checkbox/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCheckbox", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/checkboxGroup/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCheckboxGroup", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/checkboxGroup/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="layui-checkbox-group">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayCheckboxGroup",
@@ -12,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, defineProps, provide, ref, watch } from "vue";
-import { Recordable } from "../type";
+import { Recordable } from "../../types";
 
 export interface LayCheckboxGroupProps {
   modelValue?: Recordable[];
@@ -42,3 +36,9 @@ watch(
   (val) => (modelValue.value = val)
 );
 </script>
+
+<template>
+  <div class="layui-checkbox-group">
+    <slot></slot>
+  </div>
+</template>

src/component/collapse/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCollapse", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/collapseItem/index.vue

@@ -1,20 +1,3 @@
-<template>
-  <div class="layui-colla-item">
-    <h2
-      :class="['layui-colla-title', { 'layui-disabled': disabled }]"
-      @click="showHandle"
-    >
-      <slot name="title" :props="props">{{ title }}</slot>
-      <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
-    </h2>
-    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
-      <p>
-        <slot :props="props"></slot>
-      </p>
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name:"LayCollapseItem"
@@ -64,3 +47,20 @@ const showHandle = function () {
   emit("change", props.id, !_isShow, activeValues.value);
 };
 </script>
+
+<template>
+  <div class="layui-colla-item">
+    <h2
+      :class="['layui-colla-title', { 'layui-disabled': disabled }]"
+      @click="showHandle"
+    >
+      <slot name="title" :props="props">{{ title }}</slot>
+      <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
+    </h2>
+    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
+      <p>
+        <slot :props="props"></slot>
+      </p>
+    </div>
+  </div>
+</template>

src/component/container/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayContainer", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/countUp/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayCountUp", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/countUp/index.vue

@@ -4,6 +4,12 @@
   <slot name="suffix"></slot>
 </template>
 
+<script lang="ts">
+export default {
+  name: "LayCountUp",
+};
+</script>
+
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { CountUp } from 'countup.js'

src/component/dropdown/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayDropdown", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/dropdownItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayDropdownItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/dropdownItem/index.vue

@@ -1,12 +1,10 @@
-<template>
+<script lang="ts">
-  <li>
+export default {
-    <div class="layui-menu-body-title" @click="click">
+  name: "LayDropdownItem"
-      <slot></slot>
+}
-    </div>
+</script>
-  </li>
-</template>
 
-<script setup name="LayDropdownItem" lang="ts">
+<script setup lang="ts">
 import { inject, Ref } from "vue";
 
 const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
@@ -15,3 +13,11 @@ const click = function () {
   openState.value = false;
 };
 </script>
+
+<template>
+  <li>
+    <div class="layui-menu-body-title" @click="click">
+      <slot></slot>
+    </div>
+  </li>
+</template>

src/component/empty/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayEmpty", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/field/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayField", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/field/index.vue

@@ -1,3 +1,19 @@
+<script lang="ts">
+export default {
+  name: "LayField"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps, useSlots } from "vue";
+
+const slot = useSlots();
+
+const props = defineProps<{
+  title?: string;
+}>();
+</script>
+
 <template>
   <fieldset v-if="slot.default" class="layui-elem-field">
     <legend>{{ title }}</legend>
@@ -12,13 +28,3 @@
     </legend>
   </fieldset>
 </template>
-
-<script setup name="LayField" lang="ts">
-import { defineProps, useSlots } from "vue";
-
-const slot = useSlots();
-
-const props = defineProps<{
-  title?: string;
-}>();
-</script>

src/component/footer/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayFooter", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/iconPicker/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayIconPicker", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/iconPicker/index.vue

@@ -78,7 +78,13 @@
   </lay-dropdown>
 </template>
 
-<script setup name="LayIconPicker" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayIconPicker"
+}
+</script>
+
+<script setup lang="ts">
 import { defineProps, Ref, ref } from "vue";
 import { LayIconList as icons } from "@layui/icons-vue";
 

src/component/input/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayInput", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/input/index.vue

@@ -1,19 +1,10 @@
-<template>
+<script lang="ts">
-  <input
+export default {
-    :type="type"
+  name: "LayInput"
-    :name="name"
+}
-    :value="modelValue"
+</script>
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :class="{ 'layui-disabled': disabled }"
-    class="layui-input"
-    @input="onInput"
-    @focus="onFocus"
-    @blur="onBlur"
-  />
-</template>
 
-<script setup name="LayInput" lang="ts">
+<script setup lang="ts">
 import { defineProps, defineEmits } from "vue";
 
 export interface LayInputProps {
@@ -42,3 +33,18 @@ const onBlur = function () {
   emit("blur");
 };
 </script>
+
+<template>
+  <input
+    :type="type"
+    :name="name"
+    :value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :class="{ 'layui-disabled': disabled }"
+    class="layui-input"
+    @input="onInput"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>

src/component/line/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayLine", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/line/index.vue

@@ -1,7 +1,3 @@
-<template>
-  <hr :class="['layui-border-' + theme]" />
-</template>
-
 <script lang="ts">
 export default {
   name: "LayLine"
@@ -15,3 +11,7 @@ const props = defineProps<{
   theme?: string;
 }>();
 </script>
+
+<template>
+  <hr :class="['layui-border-' + theme]" />
+</template>

src/component/menu/index.less

@@ -157,15 +157,15 @@
 }
 
 .layui-nav-tree .layui-nav-item {
-  display: block;
   width: 100%;
+  display: block;
   line-height: 42px;
 }
 
 .layui-nav-tree .layui-nav-item > a {
-  position: relative;
   height: 40px;
   line-height: 40px;
+  position: relative;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -208,11 +208,11 @@
 }
 
 .layui-nav-tree .layui-nav-child {
-  position: relative;
-  z-index: 0;
   top: 0;
+  z-index: 0;
   border: none;
   box-shadow: none;
+  position: relative;
 }
 
 .layui-nav-tree .layui-nav-child dd {

src/component/menu/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayMenu", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/menu/index.vue

@@ -1,10 +1,10 @@
-<template>
+<script lang="ts">
-  <ul class="layui-nav" :class="[level? 'level':'',inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
+export default {
-    <slot></slot>
+  name: "LayMenu"
-  </ul>
+}
-</template>
+</script>
 
-<script setup name="LayMenu" lang="ts">
+<script setup lang="ts">
 import { computed, defineProps, provide } from "vue";
 import "./index.less";
 
@@ -52,3 +52,9 @@ provide("isTree", isTree);
 provide("selectedKey", selectedKey);
 provide("openKeys", openKeys);
 </script>
+
+<template>
+  <ul class="layui-nav" :class="[level? 'level':'',inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
+    <slot></slot>
+  </ul>
+</template>

src/component/menuItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayMenuItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/page/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayPage", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/page/index.vue

@@ -1,70 +1,10 @@
-<template>
+<script lang="ts">
-	<div class="layui-box layui-laypage layui-laypage-default">
+export default {
-		<span v-if="showCount" class="layui-laypage-count"
+	name: "LayPage"
-			>共 {{ total }} 条 {{ maxPage }} 页</span
+}
-		>
+</script>
-		<a
-			href="javascript:;"
-			class="layui-laypage-prev"
-			:class="[currentPage === 1 ? 'layui-disabled' : '']"
-			@click="prev()"
-		>
-			<slot v-if="slots.prev" name="prev"></slot>
-			<template v-else>上一页</template>
-		</a>
-		<template v-if="showPage">
-			<template v-for="index of totalPage" :key="index">
-				<span v-if="index === currentPage" class="layui-laypage-curr">
-					<em
-						class="layui-laypage-em"
-						:class="[theme ? 'layui-bg-' + theme : '']"
-					></em>
-					<em>{{ index }}</em>
-				</span>
-				<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
-			</template>
-		</template>
 
-		<a
+<script setup lang="ts">
-			href="javascript:;"
-			class="layui-laypage-next"
-			:class="[currentPage === maxPage ? 'layui-disabled' : '']"
-			@click="next()"
-		>
-			<slot v-if="slots.next" name="next"></slot>
-			<template v-else>下一页</template>
-		</a>
-		<span v-if="showLimit" class="layui-laypage-limits">
-			<select v-model="inlimit">
-				<option v-for="val of limits" :key="val" :value="val">
-					{{ val }} 条/页
-				</option>
-			</select>
-		</span>
-		<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-			<i class="layui-icon layui-icon-refresh"></i>
-		</a>
-		<span v-if="showSkip" class="layui-laypage-skip">
-			到第
-			<input
-				v-model="currentPageShow"
-				@keypress.enter="jumpPage()"
-				type="number"
-				class="layui-input layui-input-number"
-			/>页
-			<button
-				type="button"
-				class="layui-laypage-btn"
-				@click="jumpPage()"
-				:disabled="currentPageShow > maxPage"
-			>
-				确定
-			</button>
-		</span>
-	</div>
-</template>
-
-<script setup name="LayPage" lang="ts">
 import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
 
 const slots = useSlots();
@@ -161,3 +101,69 @@ watch(currentPage, function () {
 	emit("jump", { current: currentPage.value });
 });
 </script>
+
+<template>
+	<div class="layui-box layui-laypage layui-laypage-default">
+		<span v-if="showCount" class="layui-laypage-count"
+			>共 {{ total }} 条 {{ maxPage }} 页</span
+		>
+		<a
+			href="javascript:;"
+			class="layui-laypage-prev"
+			:class="[currentPage === 1 ? 'layui-disabled' : '']"
+			@click="prev()"
+		>
+			<slot v-if="slots.prev" name="prev"></slot>
+			<template v-else>上一页</template>
+		</a>
+		<template v-if="showPage">
+			<template v-for="index of totalPage" :key="index">
+				<span v-if="index === currentPage" class="layui-laypage-curr">
+					<em
+						class="layui-laypage-em"
+						:class="[theme ? 'layui-bg-' + theme : '']"
+					></em>
+					<em>{{ index }}</em>
+				</span>
+				<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+			</template>
+		</template>
+
+		<a
+			href="javascript:;"
+			class="layui-laypage-next"
+			:class="[currentPage === maxPage ? 'layui-disabled' : '']"
+			@click="next()"
+		>
+			<slot v-if="slots.next" name="next"></slot>
+			<template v-else>下一页</template>
+		</a>
+		<span v-if="showLimit" class="layui-laypage-limits">
+			<select v-model="inlimit">
+				<option v-for="val of limits" :key="val" :value="val">
+					{{ val }} 条/页
+				</option>
+			</select>
+		</span>
+		<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
+			<i class="layui-icon layui-icon-refresh"></i>
+		</a>
+		<span v-if="showSkip" class="layui-laypage-skip">
+			到第
+			<input
+				v-model="currentPageShow"
+				@keypress.enter="jumpPage()"
+				type="number"
+				class="layui-input layui-input-number"
+			/>页
+			<button
+				type="button"
+				class="layui-laypage-btn"
+				@click="jumpPage()"
+				:disabled="currentPageShow > maxPage"
+			>
+				确定
+			</button>
+		</span>
+	</div>
+</template>

src/component/panel/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayPanel", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/progress/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayProgress", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/radio/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayRadio ", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/radio/index.vue

@@ -1,3 +1,30 @@
+<script lang="ts">
+export default {
+  name: "LayRadio"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps<{
+  modelValue: string;
+  disabled?: boolean;
+  label?: string;
+  name: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleClick = function () {
+  if (props.disabled) {
+    return;
+  }
+  emit("change", props.label);
+  emit("update:modelValue", props.label);
+};
+</script>
+
 <template>
   <span>
     <input type="radio" :value="label" :name="name" />
@@ -23,24 +50,3 @@
     </div>
   </span>
 </template>
-
-<script setup name="LayRadio" lang="ts">
-import { defineProps, defineEmits } from "vue";
-
-const props = defineProps<{
-  modelValue: string;
-  disabled?: boolean;
-  label?: string;
-  name: string;
-}>();
-
-const emit = defineEmits(["update:modelValue", "change"]);
-
-const handleClick = function () {
-  if (props.disabled) {
-    return;
-  }
-  emit("change", props.label);
-  emit("update:modelValue", props.label);
-};
-</script>

src/component/result/index.vue

@@ -1,4 +1,7 @@
 <script lang="ts">
+export default {
+  name: "LayResult"
+}
 </script>
 
 <script setup lang="ts">

src/component/row/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayRow", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/scroll/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayScroll", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/scroll/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="layui-side-scroll">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayScroll"
@@ -13,3 +7,9 @@ export default {
 <script setup lang="ts">
 import { defineProps } from "vue";
 </script>
+
+<template>
+  <div class="layui-side-scroll">
+    <slot></slot>
+  </div>
+</template>

src/component/select/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LaySelect", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/select/index.vue

@@ -1,79 +1,10 @@
-<template>
+<script lang="ts">
-	<div
+export default {
-		ref="selectRef"
+	name: "LaySelect"
-		class="layui-unselect layui-form-select"
+}
-		:class="{ 'layui-form-selected': openState }"
+</script>
-	>
-		<div class="layui-select-title" @click="open">
-			<input
-				type="text"
-				:placeholder="
-					selectItem.value !== null &&
-					Array.isArray(selectItem.value) &&
-					selectItem.value.length > 0
-						? ''
-						: emptyMessage ?? placeholder
-				"
-				:disabled="disabled"
-				readonly
-				:value="
-					!selectItem.multiple && selectItem.value !== null
-						? selectItem.label
-						: null
-				"
-				:name="name"
-				:class="[
-					'layui-input',
-					'layui-unselect',
-					{ 'layui-disabled': disabled },
-				]"
-			/>
-			<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
-			<!-- 多选 -->
-			<div
-				v-if="selectItem.multiple && Array.isArray(selectItem.label)"
-				class="layui-multiple-select-row"
-			>
-				<div class="layui-multiple-select-badge">
-					<template v-for="(item, index) in selectItem.label" :key="index">
-						<lay-badge theme="green">
-							<span>{{ item }}</span>
-							<i
-								:class="['layui-icon', { 'layui-icon-close': true }]"
-								v-if="
-									!disabled &&
-									!(
-										Array.isArray(selectItem.value) &&
-										selectItem.value.length > 0 &&
-										disabledItemMap[selectItem.value[index]]
-									)
-								"
-								@click="
-									removeItemHandle($event, {
-										label: item,
-										value: Array.isArray(selectItem.value)
-											? selectItem.value[index]
-											: null,
-									})
-								"
-							>
-							</i>
-						</lay-badge>
-					</template>
-				</div>
-			</div>
-		</div>
-		<dl class="layui-anim layui-anim-upbit">
-			<!-- 多选不支持空提示 -->
-			<template v-if="!multiple && showEmpty">
-				<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
-			</template>
-			<slot></slot>
-		</dl>
-	</div>
-</template>
 
-<script setup name="LaySelect" lang="ts">
+<script setup lang="ts">
 import "./index.less";
 import LaySelectOption from "../selectOption/index.vue";
 import {
@@ -88,7 +19,7 @@ import {
 	Ref,
 } from "vue";
 import { useClickOutside } from "@layui/hooks-vue";
-import { SelectItem } from "../type";
+import { SelectItem } from "../../types";
 
 const selectRef = ref<null | HTMLElement>(null);
 const isClickOutside = useClickOutside(selectRef);
@@ -218,3 +149,78 @@ provide("selectItemHandle", selectItemHandle);
 provide("selectItem", selectItem);
 provide("selectItemPush", selectItemPush);
 </script>
+
+<template>
+	<div
+		ref="selectRef"
+		class="layui-unselect layui-form-select"
+		:class="{ 'layui-form-selected': openState }"
+	>
+		<div class="layui-select-title" @click="open">
+			<input
+				type="text"
+				:placeholder="
+					selectItem.value !== null &&
+					Array.isArray(selectItem.value) &&
+					selectItem.value.length > 0
+						? ''
+						: emptyMessage ?? placeholder
+				"
+				:disabled="disabled"
+				readonly
+				:value="
+					!selectItem.multiple && selectItem.value !== null
+						? selectItem.label
+						: null
+				"
+				:name="name"
+				:class="[
+					'layui-input',
+					'layui-unselect',
+					{ 'layui-disabled': disabled },
+				]"
+			/>
+			<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
+			<!-- 多选 -->
+			<div
+				v-if="selectItem.multiple && Array.isArray(selectItem.label)"
+				class="layui-multiple-select-row"
+			>
+				<div class="layui-multiple-select-badge">
+					<template v-for="(item, index) in selectItem.label" :key="index">
+						<lay-badge theme="green">
+							<span>{{ item }}</span>
+							<i
+								:class="['layui-icon', { 'layui-icon-close': true }]"
+								v-if="
+									!disabled &&
+									!(
+										Array.isArray(selectItem.value) &&
+										selectItem.value.length > 0 &&
+										disabledItemMap[selectItem.value[index]]
+									)
+								"
+								@click="
+									removeItemHandle($event, {
+										label: item,
+										value: Array.isArray(selectItem.value)
+											? selectItem.value[index]
+											: null,
+									})
+								"
+							>
+							</i>
+						</lay-badge>
+					</template>
+				</div>
+			</div>
+		</div>
+		<dl class="layui-anim layui-anim-upbit">
+			<!-- 多选不支持空提示 -->
+			<template v-if="!multiple && showEmpty">
+				<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
+			</template>
+			<slot></slot>
+		</dl>
+	</div>
+</template>

src/component/selectOption/index.vue

@@ -1,21 +1,3 @@
-<template>
-	<dd
-		:value="value"
-		:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
-		@click="selectHandle"
-	>
-		<template v-if="selectItem.multiple">
-			<lay-checkbox
-				skin="primary"
-				v-model="selected"
-				@change="selectHandle"
-				label=""
-			/>
-		</template>
-		<slot>{{ label }}</slot>
-	</dd>
-</template>
-
 <script lang="ts">
 export default {
 	name: "LaySelectOption",
@@ -80,3 +62,21 @@ onMounted(() => {
 	selected.value && callSelectItemHandle();
 });
 </script>
+
+<template>
+	<dd
+		:value="value"
+		:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
+		@click="selectHandle"
+	>
+		<template v-if="selectItem.multiple">
+			<lay-checkbox
+				skin="primary"
+				v-model="selected"
+				@change="selectHandle"
+				label=""
+			/>
+		</template>
+		<slot>{{ label }}</slot>
+	</dd>
+</template>

src/component/skeleton/index.ts

@@ -1,9 +1,8 @@
 import type { App } from 'vue'
 import Component from './index.vue'
-import type { IDefineComponent } from '../../types/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LaySkeleton', Component)
+    app.component(Component.name, Component)
 }
 
-export default Component as IDefineComponent
+export default Component;

src/component/skeleton/index.vue

@@ -1,21 +1,10 @@
-<template>
+<script lang="ts">
-  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+export default {
-    <template v-if="loading">
+  name: "LaySkeleton"
-      <slot name="skeleton">
+}
-        <lay-skeleton-item
+</script>
-            v-for="item in rows"
-            :class="[
-              item===1? 'lay-skeleton-first': '',
-              item === rows? 'lay-skeleton-last': '']"
-            type="p"
-        ></lay-skeleton-item>
-      </slot>
-    </template>
-    <slot v-else></slot>
-  </div>
-</template>
 
-<script setup name="LaySkeleton" lang="ts">
+<script setup lang="ts">
 import LaySkeletonItem from '../skeletonItem/index.vue'
 import './index.less'
 import { defineProps, withDefaults} from "vue";
@@ -31,4 +20,22 @@ const props = withDefaults(defineProps<LaySkeletonProps>(), {
   loading: false,
   animated: false,
 });
-</script>-
+</script>
+
+<template>
+  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+    <template v-if="loading">
+      <slot name="skeleton">
+        <lay-skeleton-item
+            v-for="item in rows"
+            :key="item"
+            :class="[
+              item===1? 'lay-skeleton-first': '',
+              item === rows? 'lay-skeleton-last': '']"
+            type="p"
+        ></lay-skeleton-item>
+      </slot>
+    </template>
+    <slot v-else></slot>
+  </div>
+</template>

src/component/splitPanel/index.vue

@@ -1,16 +1,3 @@
-<template>
-  <div
-    ref="target"
-    :class="['lay-split-panel', vertical ? 'lay-split-panel-vertical' : '']"
-    :style="{
-      cursor: domStatus ? (!vertical ? 'col-resize' : 'row-resize') : '',
-    }"
-    v-on="{ mouseup: mouseup }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "laySplitPanel"
@@ -132,3 +119,16 @@ provide("laySplitPanel", {
   moveChange,
 });
 </script>
+
+<template>
+  <div
+    ref="target"
+    :class="['lay-split-panel', vertical ? 'lay-split-panel-vertical' : '']"
+    :style="{
+      cursor: domStatus ? (!vertical ? 'col-resize' : 'row-resize') : '',
+    }"
+    v-on="{ mouseup: mouseup }"
+  >
+    <slot></slot>
+  </div>
+</template>

src/component/splitPanelItem/index.vue

@@ -1,26 +1,3 @@
-<template>
-  <div
-    v-if="!isStart"
-    :class="[!isStart ? 'lay-split-panel-line' : '']"
-    ref="el"
-    v-on="{ mousedown: mousedown, mouseup: mouseup }"
-  ></div>
-  <div
-    v-if="isVertical"
-    :class="['lay-split-panel-item']"
-    :style="{ height: `${space ? space : (100 + space) / stepsCount}%` }"
-  >
-    <slot></slot>
-  </div>
-  <div
-    v-else
-    :class="['lay-split-panel-item']"
-    :style="{ width: `${space ? space : (100 + space) / stepsCount}%` }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LaySplitPanelItem"
@@ -100,3 +77,26 @@ onBeforeUnmount(() => {
   );
 });
 </script>
+
+<template>
+  <div
+    v-if="!isStart"
+    :class="[!isStart ? 'lay-split-panel-line' : '']"
+    ref="el"
+    v-on="{ mousedown: mousedown, mouseup: mouseup }"
+  ></div>
+  <div
+    v-if="isVertical"
+    :class="['lay-split-panel-item']"
+    :style="{ height: `${space ? space : (100 + space) / stepsCount}%` }"
+  >
+    <slot></slot>
+  </div>
+  <div
+    v-else
+    :class="['lay-split-panel-item']"
+    :style="{ width: `${space ? space : (100 + space) / stepsCount}%` }"
+  >
+    <slot></slot>
+  </div>
+</template>

src/component/stepItem/index.vue

@@ -1,86 +1,3 @@
-<template>
-  <div
-    v-if="!simple"
-    :class="[
-      'lay-step-item',
-      isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
-      isCenter ? 'is-item-center' : '',
-      isVertical ? 'is-vertical' : '',
-    ]"
-    :style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
-  >
-    <div
-      :class="[
-        !isLast
-          ? isLineActive
-            ? `lay-step-item-line lay-step-item-line-${status || 'active'}`
-            : 'lay-step-item-line'
-          : '',
-        isCenter ? 'is-line-center' : '',
-      ]"
-    >
-      <div
-        :class="[
-          'lay-step-item-pace',
-          isActive ? `lay-step-item-active` : '',
-          isCurrent === index ? `lay-step-item--${currentStatus}` : '',
-          status ? `lay-step-item-${status}` : '',
-          isWait ? 'lay-step-item-wait' : '',
-          isCenter ? 'is-center' : '',
-        ]"
-        @click="onChange(index + 1)"
-      >
-        <slot name="pace">
-          <template v-if="icon">
-            <lay-icon :type="icon"></lay-icon>
-          </template>
-          <template v-else>
-            <span v-if="!isActive">{{ index + 1 }}</span>
-            <lay-icon
-              v-else
-              :type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
-            ></lay-icon>
-          </template>
-        </slot>
-      </div>
-    </div>
-    <div
-      :class="[
-        'lay-step-item-content',
-        composition === 'row' ? 'lay-step-item-content-row' : '',
-        isActive ? `lay-step-item-content-active` : '',
-        isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
-        status ? `lay-step-item-content-${status}` : '',
-        isWait ? 'lay-step-item-content-wait' : '',
-      ]"
-      @click="onChange(index + 1)"
-    >
-      <slot>
-        <div class="lay-step-item-content-title">{{ title }}</div>
-        <p>{{ content }}</p>
-      </slot>
-    </div>
-  </div>
-  <div
-    v-else
-    :class="[
-      'lay-step-item',
-      'lay-step-simple',
-      !isStart ? 'lay-step-item-simple' : '',
-      'lay-step-item-simple-border',
-      isActive ? 'lay-step-item-simple-active' : '',
-      isCurrent === index ? `lay-step-item-simple-${currentStatus}` : '',
-      isCurrentBorder === index
-        ? `lay-step-item-simple-${currentStatus}-border`
-        : '',
-      isSimpleActive ? 'lay-step-item-simple-active-border' : '',
-    ]"
-    @click="onChange(index + 1)"
-  >
-    <slot>{{ index + 1 }}.{{ title }}</slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayStepItem"
@@ -201,3 +118,86 @@ onBeforeUnmount(() => {
   );
 });
 </script>
+
+<template>
+  <div
+    v-if="!simple"
+    :class="[
+      'lay-step-item',
+      isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
+      isCenter ? 'is-item-center' : '',
+      isVertical ? 'is-vertical' : '',
+    ]"
+    :style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
+  >
+    <div
+      :class="[
+        !isLast
+          ? isLineActive
+            ? `lay-step-item-line lay-step-item-line-${status || 'active'}`
+            : 'lay-step-item-line'
+          : '',
+        isCenter ? 'is-line-center' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'lay-step-item-pace',
+          isActive ? `lay-step-item-active` : '',
+          isCurrent === index ? `lay-step-item--${currentStatus}` : '',
+          status ? `lay-step-item-${status}` : '',
+          isWait ? 'lay-step-item-wait' : '',
+          isCenter ? 'is-center' : '',
+        ]"
+        @click="onChange(index + 1)"
+      >
+        <slot name="pace">
+          <template v-if="icon">
+            <lay-icon :type="icon"></lay-icon>
+          </template>
+          <template v-else>
+            <span v-if="!isActive">{{ index + 1 }}</span>
+            <lay-icon
+              v-else
+              :type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
+            ></lay-icon>
+          </template>
+        </slot>
+      </div>
+    </div>
+    <div
+      :class="[
+        'lay-step-item-content',
+        composition === 'row' ? 'lay-step-item-content-row' : '',
+        isActive ? `lay-step-item-content-active` : '',
+        isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
+        status ? `lay-step-item-content-${status}` : '',
+        isWait ? 'lay-step-item-content-wait' : '',
+      ]"
+      @click="onChange(index + 1)"
+    >
+      <slot>
+        <div class="lay-step-item-content-title">{{ title }}</div>
+        <p>{{ content }}</p>
+      </slot>
+    </div>
+  </div>
+  <div
+    v-else
+    :class="[
+      'lay-step-item',
+      'lay-step-simple',
+      !isStart ? 'lay-step-item-simple' : '',
+      'lay-step-item-simple-border',
+      isActive ? 'lay-step-item-simple-active' : '',
+      isCurrent === index ? `lay-step-item-simple-${currentStatus}` : '',
+      isCurrentBorder === index
+        ? `lay-step-item-simple-${currentStatus}-border`
+        : '',
+      isSimpleActive ? 'lay-step-item-simple-active-border' : '',
+    ]"
+    @click="onChange(index + 1)"
+  >
+    <slot>{{ index + 1 }}.{{ title }}</slot>
+  </div>
+</template>

src/component/tabItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayTabItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/table/index.less

@@ -4,3 +4,610 @@
 .layui-table-col-special {
   width: 34px;
 }
+
+.layui-table {
+  width: 100%;
+  background-color: #fff;
+  color: #666;
+}
+
+.layui-table tr {
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.layui-table th {
+  text-align: left;
+  font-weight: 400;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr,
+.layui-table[lay-even] tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.layui-table td,
+.layui-table th,
+.layui-table-col-set,
+.layui-table-fixed-r,
+.layui-table-grid-down,
+.layui-table-header,
+.layui-table-page,
+.layui-table-tips-main,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-view,
+.layui-table[lay-skin="line"],
+.layui-table[lay-skin="row"] {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #eee;
+}
+
+.layui-table td,
+.layui-table th {
+  position: relative;
+  padding: 9px 15px;
+  min-height: 20px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.layui-table[lay-skin="line"] td,
+.layui-table[lay-skin="line"] th {
+  border-width: 0 0 1px;
+}
+
+.layui-table[lay-skin="row"] td,
+.layui-table[lay-skin="row"] th {
+  border-width: 0 1px 0 0;
+}
+
+.layui-table[lay-skin="nob"] td,
+.layui-table[lay-skin="nob"] th {
+  border: none;
+}
+
+.layui-table img {
+  max-width: 100px;
+}
+
+.layui-table[lay-size="lg"] td,
+.layui-table[lay-size="lg"] th {
+  padding: 15px 30px;
+}
+
+.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell {
+  height: 40px;
+  line-height: 40px;
+}
+
+.layui-table[lay-size="sm"] td,
+.layui-table[lay-size="sm"] th {
+  font-size: 12px;
+  padding: 5px 10px;
+}
+
+.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
+  height: 20px;
+  line-height: 20px;
+}
+
+.layui-table[lay-data] {
+  display: none;
+}
+
+.layui-table-box {
+  position: relative;
+  overflow: hidden;
+}
+
+.layui-table-view .layui-table {
+  position: relative;
+  margin: 0;
+  border-collapse: separate;
+}
+
+.layui-table-view .layui-table[lay-skin="line"] {
+  border-width: 0 1px 0 0;
+}
+
+.layui-table-view .layui-table[lay-skin="row"] {
+  border-width: 0 0 1px;
+}
+
+.layui-table-view .layui-table td,
+.layui-table-view .layui-table th {
+  border-top: none;
+  border-left: none;
+}
+
+.layui-table-view .layui-table td.layui-table-col-special,
+.layui-table-view .layui-table th.layui-table-col-special {
+  padding: 5px 16px;
+}
+
+.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
+  cursor: pointer;
+}
+
+.layui-table-view .layui-table td {
+  cursor: default;
+}
+
+.layui-table-view .layui-table td[data-edit="text"] {
+  cursor: text;
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
+  width: 18px;
+  height: 18px;
+}
+
+.layui-table-view .layui-form-radio {
+  line-height: 0;
+  padding: 0;
+}
+
+.layui-table-view .layui-form-radio > i {
+  margin: 0;
+  font-size: 20px;
+}
+
+.layui-table-init {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  z-index: 110;
+}
+
+.layui-table-init .layui-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -15px 0 0 -15px;
+  font-size: 30px;
+  color: #c2c2c2;
+}
+
+.layui-table-header {
+  border-width: 0 0 1px;
+  overflow: hidden;
+}
+
+.layui-table-header .layui-table {
+  margin-bottom: -1px;
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  padding: 5px;
+  line-height: 16px;
+  margin-right: 10px;
+  text-align: center;
+  color: #333;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  -webkit-transition: 0.5s all;
+  transition: 0.5s all;
+}
+
+.layui-table-tool .layui-inline[lay-event]:hover {
+  border: 1px solid #999;
+}
+
+.layui-table-tool-temp {
+  padding-right: 120px;
+}
+
+.layui-table-tool-self {
+  position: absolute;
+  right: 17px;
+  top: 10px;
+}
+
+.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
+  margin: 0 0 0 10px;
+}
+
+.layui-table-tool-panel {
+  position: absolute;
+  top: 29px;
+  left: -1px;
+  padding: 5px 0;
+  min-width: 150px;
+  min-height: 40px;
+  border: 1px solid #d2d2d2;
+  text-align: left;
+  overflow-y: auto;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+}
+
+.layui-table-cell,
+.layui-table-tool-panel li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layui-table-tool-panel li {
+  padding: 0 10px;
+  line-height: 30px;
+  -webkit-transition: 0.5s all;
+  transition: 0.5s all;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] {
+  width: 100%;
+  padding-left: 28px;
+}
+
+.layui-table-tool-panel li:hover {
+  background-color: #f6f6f6;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span {
+  padding: 0;
+}
+
+.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
+  left: auto;
+  right: -1px;
+}
+
+.layui-table-col-set {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+  height: 100%;
+  border-width: 0 0 0 1px;
+  background-color: #fff;
+}
+
+.layui-table-sort {
+  width: 10px;
+  height: 20px;
+  margin-left: 5px;
+  cursor: pointer !important;
+}
+
+.layui-table-sort .layui-edge {
+  position: absolute;
+  left: 5px;
+  border-width: 5px;
+}
+
+.layui-table-sort .layui-table-sort-asc {
+  top: 3px;
+  border-top: none;
+  border-bottom-style: solid;
+  border-bottom-color: #b2b2b2;
+}
+
+.layui-table-sort .layui-table-sort-asc:hover {
+  border-bottom-color: #666;
+}
+
+.layui-table-sort .layui-table-sort-desc {
+  bottom: 5px;
+  border-bottom: none;
+  border-top-style: solid;
+  border-top-color: #b2b2b2;
+}
+
+.layui-table-sort .layui-table-sort-desc:hover {
+  border-top-color: #666;
+}
+
+.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
+  border-bottom-color: #000;
+}
+
+.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
+  border-top-color: #000;
+}
+
+.layui-table-cell {
+  height: 28px;
+  line-height: 28px;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
+  top: -1px;
+  padding: 0;
+}
+
+.layui-table-cell .layui-table-link {
+  color: #01aaed;
+}
+
+.laytable-cell-checkbox,
+.laytable-cell-numbers,
+.laytable-cell-radio,
+.laytable-cell-space {
+  padding: 0;
+  text-align: center;
+  -webkit-box-pack: center;
+}
+
+.layui-table-body {
+  position: relative;
+  overflow: auto;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+
+.layui-table-body .layui-none {
+  line-height: 26px;
+  padding: 30px 15px;
+  text-align: center;
+  color: #999;
+}
+
+.layui-table-fixed {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 101;
+}
+
+.layui-table-fixed .layui-table-body {
+  overflow: hidden;
+}
+
+.layui-table-fixed-l {
+  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+.layui-table-fixed-r {
+  left: auto;
+  right: -1px;
+  border-width: 0 0 0 1px;
+  box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+.layui-table-fixed-r .layui-table-header {
+  position: relative;
+  overflow: visible;
+}
+
+.layui-table-mend {
+  position: absolute;
+  right: -49px;
+  top: 0;
+  height: 100%;
+  width: 50px;
+}
+
+.layui-table-tool {
+  position: relative;
+  z-index: 890;
+  width: 100%;
+  min-height: 50px;
+  line-height: 30px;
+  padding: 10px 15px;
+  border-width: 0 0 1px;
+}
+
+.layui-table-tool .layui-btn-container {
+  margin-bottom: -10px;
+}
+
+.layui-table-page,
+.layui-table-total {
+  border-width: 1px 0 0;
+  margin-bottom: -1px;
+  overflow: hidden;
+}
+
+.layui-table-page {
+  position: relative;
+  width: 100%;
+  padding: 7px 7px 0;
+  height: 41px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.layui-table-page > div {
+  height: 26px;
+}
+
+.layui-table-page .layui-laypage {
+  margin: 0;
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span {
+  height: 26px;
+  line-height: 26px;
+  margin-bottom: 10px;
+  border: none;
+  background: 0 0;
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span.layui-laypage-curr {
+  padding: 0 12px;
+}
+
+.layui-table-page .layui-laypage span {
+  margin-left: 0;
+  padding: 0;
+}
+
+.layui-table-page .layui-laypage .layui-laypage-prev {
+  margin-left: -7px !important;
+}
+
+.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
+  left: 0;
+  top: 0;
+  padding: 0;
+}
+
+.layui-table-page .layui-laypage button,
+.layui-table-page .layui-laypage input {
+  height: 26px;
+  line-height: 26px;
+}
+
+.layui-table-page .layui-laypage input {
+  width: 40px;
+}
+
+.layui-table-page .layui-laypage button {
+  padding: 0 10px;
+}
+
+.layui-table-page select {
+  height: 18px;
+}
+
+.layui-table-pagebar {
+  float: right;
+  line-height: 26px;
+}
+
+.layui-table-view select[lay-ignore] {
+  display: inline-block;
+}
+
+.layui-table-patch .layui-table-cell {
+  padding: 0;
+  width: 30px;
+}
+
+.layui-table-edit {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 14px 1px;
+  border-radius: 0;
+  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
+}
+
+.layui-table-edit:focus {
+  border-color: #5fb878 !important;
+}
+
+select.layui-table-edit {
+  padding: 0 0 0 10px;
+  border-color: #d2d2d2;
+}
+
+.layui-table-view .layui-form-checkbox,
+.layui-table-view .layui-form-radio,
+.layui-table-view .layui-form-switch {
+  top: 0;
+  margin: 0;
+  box-sizing: content-box;
+}
+
+.layui-table-view .layui-form-checkbox {
+  top: -1px;
+  height: 26px;
+  line-height: 26px;
+}
+
+.layui-table-view .layui-form-checkbox i {
+  height: 26px;
+}
+
+.layui-table-grid .layui-table-cell {
+  overflow: visible;
+}
+
+.layui-table-grid-down {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 26px;
+  height: 100%;
+  padding: 5px 0;
+  border-width: 0 0 0 1px;
+  text-align: center;
+  background-color: #fff;
+  color: #999;
+  cursor: pointer;
+}
+
+.layui-table-grid-down .layui-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -8px 0 0 -8px;
+}
+
+.layui-table-grid-down:hover {
+  background-color: #fbfbfb;
+}
+
+body .layui-table-tips .layui-layer-content {
+  background: 0 0;
+  padding: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+}
+
+.layui-table-tips-main {
+  margin: -44px 0 0 -1px;
+  max-height: 150px;
+  padding: 8px 15px;
+  font-size: 14px;
+  overflow-y: scroll;
+  background-color: #fff;
+  color: #666;
+}
+
+.layui-table-tips-c {
+  position: absolute;
+  right: -3px;
+  top: -13px;
+  width: 20px;
+  height: 20px;
+  padding: 3px;
+  cursor: pointer;
+  background-color: #666;
+  border-radius: 50%;
+  color: #fff;
+}
+
+.layui-table-tips-c:hover {
+  background-color: #777;
+}
+
+.layui-table-tips-c:before {
+  position: relative;
+  right: -2px;
+}
+
+.layui-table,
+.layui-table-view {
+  margin: 10px 0;
+}

src/component/timeline/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayTimeline", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/timelineItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayTimelineItem", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/timelineItem/index.vue

@@ -1,21 +1,3 @@
-<template>
-  <li class="layui-timeline-item">
-    <i class="layui-icon layui-timeline-axis" v-if="slot.dot">
-      <slot name="dot"></slot>
-    </i>
-    <i class="layui-icon layui-timeline-axis" v-else></i>
-    <div class="layui-timeline-content layui-text">
-      <div v-if="simple" class="layui-timeline-title">
-        {{ title }}
-      </div>
-      <h3 v-else class="layui-timeline-title">
-        {{ title }}
-      </h3>
-      <slot></slot>
-    </div>
-  </li>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayTimelineItem",
@@ -34,3 +16,21 @@ export interface LayTimelineItemProps {
 
 const props = defineProps<LayTimelineItemProps>();
 </script>
+
+<template>
+  <li class="layui-timeline-item">
+    <i class="layui-icon layui-timeline-axis" v-if="slot.dot">
+      <slot name="dot"></slot>
+    </i>
+    <i class="layui-icon layui-timeline-axis" v-else></i>
+    <div class="layui-timeline-content layui-text">
+      <div v-if="simple" class="layui-timeline-title">
+        {{ title }}
+      </div>
+      <h3 v-else class="layui-timeline-title">
+        {{ title }}
+      </h3>
+      <slot></slot>
+    </div>
+  </li>
+</template>

src/index.ts

@@ -75,6 +75,7 @@ import LaySplitPanel from "./component/splitPanel/index";
 import LaySplitPanelItem from "./component/splitPanelItem/index";
 import LayException from "./component/exception/index"
 import LayResult from "./component/result/index"
+import LayConfigProvider from "./provider"
 
 const components: Record<string, Component> = {
   LaySplitPanel,
@@ -146,7 +147,8 @@ const components: Record<string, Component> = {
   LayStepItem,
   LaySubMenu,
   LayException,
-  LayResult
+  LayResult,
+  LayConfigProvider
 };
 
 const install = (app: App): void => {
@@ -226,7 +228,8 @@ export {
   LayStepItem,
   LaySubMenu,
   LayException,
-  LayResult
+  LayResult,
+  LayConfigProvider
 };
 
 export { layer, useLayer };

src/provider/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/provider/index.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+export default {
+    name: "lay-config-provider"
+}
+</script>
+
+<script setup lang="ts">
+
+// 切换主题
+
+// 切换语言
+
+</script>
+
+<template>
+    <div class="lay-config-provider">
+        <slot></slot>    
+    </div>    
+</template>

src/theme/index.less

@@ -1677,11 +1677,6 @@ a cite {
   cursor: pointer;
 }
 
-.layui-table,
-.layui-table-view {
-  margin: 10px 0;
-}
-
 .layui-flow-more {
   margin: 10px 0;
   text-align: center;
@@ -1716,253 +1711,6 @@ a cite {
   color: #737383;
 }
 
-.layui-table {
-  width: 100%;
-  background-color: #fff;
-  color: #666;
-}
-
-.layui-table tr {
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-}
-
-.layui-table th {
-  text-align: left;
-  font-weight: 400;
-}
-
-.layui-table tbody tr:hover,
-.layui-table thead tr,
-.layui-table-click,
-.layui-table-header,
-.layui-table-hover,
-.layui-table-mend,
-.layui-table-patch,
-.layui-table-tool,
-.layui-table-total,
-.layui-table-total tr,
-.layui-table[lay-even] tr:nth-child(even) {
-  background-color: #fafafa;
-}
-
-.layui-table td,
-.layui-table th,
-.layui-table-col-set,
-.layui-table-fixed-r,
-.layui-table-grid-down,
-.layui-table-header,
-.layui-table-page,
-.layui-table-tips-main,
-.layui-table-tool,
-.layui-table-total,
-.layui-table-view,
-.layui-table[lay-skin="line"],
-.layui-table[lay-skin="row"] {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #eee;
-}
-
-.layui-table td,
-.layui-table th {
-  position: relative;
-  padding: 9px 15px;
-  min-height: 20px;
-  line-height: 20px;
-  font-size: 14px;
-}
-
-.layui-table[lay-skin="line"] td,
-.layui-table[lay-skin="line"] th {
-  border-width: 0 0 1px;
-}
-
-.layui-table[lay-skin="row"] td,
-.layui-table[lay-skin="row"] th {
-  border-width: 0 1px 0 0;
-}
-
-.layui-table[lay-skin="nob"] td,
-.layui-table[lay-skin="nob"] th {
-  border: none;
-}
-
-.layui-table img {
-  max-width: 100px;
-}
-
-.layui-table[lay-size="lg"] td,
-.layui-table[lay-size="lg"] th {
-  padding: 15px 30px;
-}
-
-.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell {
-  height: 40px;
-  line-height: 40px;
-}
-
-.layui-table[lay-size="sm"] td,
-.layui-table[lay-size="sm"] th {
-  font-size: 12px;
-  padding: 5px 10px;
-}
-
-.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
-  height: 20px;
-  line-height: 20px;
-}
-
-.layui-table[lay-data] {
-  display: none;
-}
-
-.layui-table-box {
-  position: relative;
-  overflow: hidden;
-}
-
-.layui-table-view .layui-table {
-  position: relative;
-  margin: 0;
-  border-collapse: separate;
-}
-
-.layui-table-view .layui-table[lay-skin="line"] {
-  border-width: 0 1px 0 0;
-}
-
-.layui-table-view .layui-table[lay-skin="row"] {
-  border-width: 0 0 1px;
-}
-
-.layui-table-view .layui-table td,
-.layui-table-view .layui-table th {
-  border-top: none;
-  border-left: none;
-}
-
-.layui-table-view .layui-table td.layui-table-col-special,
-.layui-table-view .layui-table th.layui-table-col-special {
-  padding: 5px 16px;
-}
-
-.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
-  cursor: pointer;
-}
-
-.layui-table-view .layui-table td {
-  cursor: default;
-}
-
-.layui-table-view .layui-table td[data-edit="text"] {
-  cursor: text;
-}
-
-.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
-  width: 18px;
-  height: 18px;
-}
-
-.layui-table-view .layui-form-radio {
-  line-height: 0;
-  padding: 0;
-}
-
-.layui-table-view .layui-form-radio > i {
-  margin: 0;
-  font-size: 20px;
-}
-
-.layui-table-init {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  z-index: 110;
-}
-
-.layui-table-init .layui-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -15px 0 0 -15px;
-  font-size: 30px;
-  color: #c2c2c2;
-}
-
-.layui-table-header {
-  border-width: 0 0 1px;
-  overflow: hidden;
-}
-
-.layui-table-header .layui-table {
-  margin-bottom: -1px;
-}
-
-.layui-table-tool .layui-inline[lay-event] {
-  position: relative;
-  width: 26px;
-  height: 26px;
-  padding: 5px;
-  line-height: 16px;
-  margin-right: 10px;
-  text-align: center;
-  color: #333;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  -webkit-transition: 0.5s all;
-  transition: 0.5s all;
-}
-
-.layui-table-tool .layui-inline[lay-event]:hover {
-  border: 1px solid #999;
-}
-
-.layui-table-tool-temp {
-  padding-right: 120px;
-}
-
-.layui-table-tool-self {
-  position: absolute;
-  right: 17px;
-  top: 10px;
-}
-
-.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
-  margin: 0 0 0 10px;
-}
-
-.layui-table-tool-panel {
-  position: absolute;
-  top: 29px;
-  left: -1px;
-  padding: 5px 0;
-  min-width: 150px;
-  min-height: 40px;
-  border: 1px solid #d2d2d2;
-  text-align: left;
-  overflow-y: auto;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
-}
-
-.layui-table-cell,
-.layui-table-tool-panel li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.layui-table-tool-panel li {
-  padding: 0 10px;
-  line-height: 30px;
-  -webkit-transition: 0.5s all;
-  transition: 0.5s all;
-}
-
 .layui-iconpicker-list li,
 .layui-keyboard-list li,
 .layui-menu li,
@@ -1971,284 +1719,6 @@ a cite {
   transition: all 0.3s;
 }
 
-.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] {
-  width: 100%;
-  padding-left: 28px;
-}
-
-.layui-table-tool-panel li:hover {
-  background-color: #f6f6f6;
-}
-
-.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span {
-  padding: 0;
-}
-
-.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
-  left: auto;
-  right: -1px;
-}
-
-.layui-table-col-set {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 20px;
-  height: 100%;
-  border-width: 0 0 0 1px;
-  background-color: #fff;
-}
-
-.layui-table-sort {
-  width: 10px;
-  height: 20px;
-  margin-left: 5px;
-  cursor: pointer !important;
-}
-
-.layui-table-sort .layui-edge {
-  position: absolute;
-  left: 5px;
-  border-width: 5px;
-}
-
-.layui-table-sort .layui-table-sort-asc {
-  top: 3px;
-  border-top: none;
-  border-bottom-style: solid;
-  border-bottom-color: #b2b2b2;
-}
-
-.layui-table-sort .layui-table-sort-asc:hover {
-  border-bottom-color: #666;
-}
-
-.layui-table-sort .layui-table-sort-desc {
-  bottom: 5px;
-  border-bottom: none;
-  border-top-style: solid;
-  border-top-color: #b2b2b2;
-}
-
-.layui-table-sort .layui-table-sort-desc:hover {
-  border-top-color: #666;
-}
-
-.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
-  border-bottom-color: #000;
-}
-
-.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
-  border-top-color: #000;
-}
-
-.layui-table-cell {
-  height: 28px;
-  line-height: 28px;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
-  top: -1px;
-  padding: 0;
-}
-
-.layui-table-cell .layui-table-link {
-  color: #01aaed;
-}
-
-.laytable-cell-checkbox,
-.laytable-cell-numbers,
-.laytable-cell-radio,
-.laytable-cell-space {
-  padding: 0;
-  text-align: center;
-  -webkit-box-pack: center;
-}
-
-.layui-table-body {
-  position: relative;
-  overflow: auto;
-  margin-right: -1px;
-  margin-bottom: -1px;
-}
-
-.layui-table-body .layui-none {
-  line-height: 26px;
-  padding: 30px 15px;
-  text-align: center;
-  color: #999;
-}
-
-.layui-table-fixed {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 101;
-}
-
-.layui-table-fixed .layui-table-body {
-  overflow: hidden;
-}
-
-.layui-table-fixed-l {
-  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
-}
-
-.layui-table-fixed-r {
-  left: auto;
-  right: -1px;
-  border-width: 0 0 0 1px;
-  box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
-}
-
-.layui-table-fixed-r .layui-table-header {
-  position: relative;
-  overflow: visible;
-}
-
-.layui-table-mend {
-  position: absolute;
-  right: -49px;
-  top: 0;
-  height: 100%;
-  width: 50px;
-}
-
-.layui-table-tool {
-  position: relative;
-  z-index: 890;
-  width: 100%;
-  min-height: 50px;
-  line-height: 30px;
-  padding: 10px 15px;
-  border-width: 0 0 1px;
-}
-
-.layui-table-tool .layui-btn-container {
-  margin-bottom: -10px;
-}
-
-.layui-table-page,
-.layui-table-total {
-  border-width: 1px 0 0;
-  margin-bottom: -1px;
-  overflow: hidden;
-}
-
-.layui-table-page {
-  position: relative;
-  width: 100%;
-  padding: 7px 7px 0;
-  height: 41px;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.layui-table-page > div {
-  height: 26px;
-}
-
-.layui-table-page .layui-laypage {
-  margin: 0;
-}
-
-.layui-table-page .layui-laypage a,
-.layui-table-page .layui-laypage span {
-  height: 26px;
-  line-height: 26px;
-  margin-bottom: 10px;
-  border: none;
-  background: 0 0;
-}
-
-.layui-table-page .layui-laypage a,
-.layui-table-page .layui-laypage span.layui-laypage-curr {
-  padding: 0 12px;
-}
-
-.layui-table-page .layui-laypage span {
-  margin-left: 0;
-  padding: 0;
-}
-
-.layui-table-page .layui-laypage .layui-laypage-prev {
-  margin-left: -7px !important;
-}
-
-.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
-  left: 0;
-  top: 0;
-  padding: 0;
-}
-
-.layui-table-page .layui-laypage button,
-.layui-table-page .layui-laypage input {
-  height: 26px;
-  line-height: 26px;
-}
-
-.layui-table-page .layui-laypage input {
-  width: 40px;
-}
-
-.layui-table-page .layui-laypage button {
-  padding: 0 10px;
-}
-
-.layui-table-page select {
-  height: 18px;
-}
-
-.layui-table-pagebar {
-  float: right;
-  line-height: 26px;
-}
-
-.layui-table-view select[lay-ignore] {
-  display: inline-block;
-}
-
-.layui-table-patch .layui-table-cell {
-  padding: 0;
-  width: 30px;
-}
-
-.layui-table-edit {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0 14px 1px;
-  border-radius: 0;
-  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
-}
-
-.layui-table-edit:focus {
-  border-color: #5fb878 !important;
-}
-
-select.layui-table-edit {
-  padding: 0 0 0 10px;
-  border-color: #d2d2d2;
-}
-
-.layui-table-view .layui-form-checkbox,
-.layui-table-view .layui-form-radio,
-.layui-table-view .layui-form-switch {
-  top: 0;
-  margin: 0;
-  box-sizing: content-box;
-}
-
 .layui-colorpicker-alpha-slider,
 .layui-colorpicker-side-slider,
 .layui-menu,
@@ -2257,83 +1727,6 @@ select.layui-table-edit {
   box-sizing: border-box;
 }
 
-.layui-table-view .layui-form-checkbox {
-  top: -1px;
-  height: 26px;
-  line-height: 26px;
-}
-
-.layui-table-view .layui-form-checkbox i {
-  height: 26px;
-}
-
-.layui-table-grid .layui-table-cell {
-  overflow: visible;
-}
-
-.layui-table-grid-down {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 26px;
-  height: 100%;
-  padding: 5px 0;
-  border-width: 0 0 0 1px;
-  text-align: center;
-  background-color: #fff;
-  color: #999;
-  cursor: pointer;
-}
-
-.layui-table-grid-down .layui-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -8px 0 0 -8px;
-}
-
-.layui-table-grid-down:hover {
-  background-color: #fbfbfb;
-}
-
-body .layui-table-tips .layui-layer-content {
-  background: 0 0;
-  padding: 0;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
-}
-
-.layui-table-tips-main {
-  margin: -44px 0 0 -1px;
-  max-height: 150px;
-  padding: 8px 15px;
-  font-size: 14px;
-  overflow-y: scroll;
-  background-color: #fff;
-  color: #666;
-}
-
-.layui-table-tips-c {
-  position: absolute;
-  right: -3px;
-  top: -13px;
-  width: 20px;
-  height: 20px;
-  padding: 3px;
-  cursor: pointer;
-  background-color: #666;
-  border-radius: 50%;
-  color: #fff;
-}
-
-.layui-table-tips-c:hover {
-  background-color: #777;
-}
-
-.layui-table-tips-c:before {
-  position: relative;
-  right: -2px;
-}
-
 .layui-upload-file {
   display: none !important;
   opacity: 0.01;

src/theme/variable.less

@@ -0,0 +1,27 @@
+@global-primary-color: #009688;
+
+@global-danger-color: #ff5722;
+
+@global-normal-color: #1e9fff;
+
+@global-warm-color: #ffb800;
+
+@global-bg-color: #393D49;
+
+@global-text-color: #fff;
+
+@global-border-radius: 2px;
+
+@button-primary-color: @global-primary-color;
+
+@button-normal-color: @global-normal-color;
+
+@button-danger-color: @global-danger-color;
+
+@button-warm-color: @global-warm-color;
+
+@button-border-radius: @global-border-radius;
+
+@card-border-radius: @global-border-radius;
+
+@card-bg-color: @global-bg-color;