[合并]

2022-01-08 11:27:25 +08:00
parent 38e1e38d81 0e4d5d65e5
commit d5c10257fe
27 changed files with 1995 additions and 547 deletions
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
  line-height: 60px;
 }

-.layui-nav .layui-nav-item a {
+.layui-nav .layui-nav-item >  a {
  display: block;
  padding: 0 30px;
-  color: #fff;
  color: rgba(255, 255, 255, 0.7);
-  -webkit-transition: all 0.3s;
 }

 .layui-nav .layui-this:after,
@@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
  line-height: 42px;
 }

-.layui-nav-tree .layui-nav-item a {
+.layui-nav-tree .layui-nav-item > a {
  position: relative;
  height: 42px;
  line-height: 42px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
+  padding: 5px 30px 5px 30px;
 }

-.layui-nav-tree .layui-nav-item > a {
-  padding-top: 5px;
-  padding-bottom: 5px;
+.layui-nav-tree .layui-nav-item * {
+  color: rgba(255, 255, 255, 0.7);
 }

 .layui-nav-tree .layui-nav-more {
--- a/src/index.ts
+++ b/src/index.ts
@@ -66,8 +66,11 @@ import LayCarouselItem from "./module/carouselItem/index";
 import LayColorPicker from "./module/colorPicker/index";
 import LayTooltip from "./module/tooltip/index";
 import LayInputNumber from "./module/inputNumber/index";
-import LaySkeleton from './module/skeleton/index';
-import LaySkeletonItem from './module/skeletonItem/index';
+import LaySkeleton from "./module/skeleton/index";
+import LaySkeletonItem from "./module/skeletonItem/index";
+import LayStep from "./module/step/index";
+import LayStepItem from "./module/stepItem/index";
+import LaySubMenu from "./module/subMenu/index"

 export const components: Record<string, IDefineComponent> = {
  LayRadio,
@@ -132,6 +135,9 @@ export const components: Record<string, IDefineComponent> = {
  LaySkeleton,
  LaySkeletonItem,
  LayCountUp,
+  LayStep,
+  LayStepItem,
+  LaySubMenu
 };

 const install = (app: App, options?: InstallOptions): void => {
@@ -206,6 +212,9 @@ export {
  LaySkeleton,
  LaySkeletonItem,
  LayCountUp,
+  LayStep,
+  LayStepItem,
+  LaySubMenu
 };

 export { layer };
--- a/src/module/menuItem/index.vue
+++ b/src/module/menuItem/index.vue
@@ -1,39 +1,12 @@
-<template>
-  <li
-    v-if="slots.default"
-    class="layui-nav-item"
-    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
-  >
-    <a href="javascript:void(0)" @click="openHandle">
-      {{ title }}
-      <i class="layui-icon layui-icon-down layui-nav-more"></i>
-    </a>
-    <dl
-      class="layui-nav-child"
-      :class="[
-        openKeys.includes(id) && !isTree ? 'layui-show' : '',
-        !isTree ? 'layui-anim layui-anim-upbit' : '',
-      ]"
-    >
-      <slot></slot>
-    </dl>
-  </li>
+<script lang="ts">
+export default {
+  name: "LayMenuItem"
+}
+</script>

-  <li
-    v-else
-    class="layui-nav-item"
-    :class="[selectedKey === id ? 'layui-this' : '']"
-    @click="selectHandle()"
-  >
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </li>
-</template>
+<script setup lang="ts">
+import { defineProps, inject, Ref, useSlots } from "vue";

-<script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, Ref, ref, useSlots } from "vue";
 const slots = useSlots();

 const props = defineProps<{
@@ -41,19 +14,22 @@ const props = defineProps<{
  title: string;
 }>();

-const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
-
-const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
-  }
-};

 const selectHandle = function () {
  selectedKey.value = props.id;
 };
 </script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[selectedKey === id ? 'layui-this' : '']"
+    @click="selectHandle()"
+  >
+    <a href="javascript:void(0)">
+      <slot v-if="slots.default"></slot>
+      <span v-else>{{ title }}</span>
+    </a>
+  </li>
+</template>
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -1,10 +1,27 @@
 <template>
  <div class="layui-slider-vertical" v-if="vertical">
-    <div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
-      <div class="layui-slider-vertical-btn"></div>
-      <div class="layui-slider-vertical-btn"></div>
+    <div
+      ref="rangetracker2"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-vrange"
+      v-if="range"
+    >
+      <div
+        :style="{ bottom: verticalRangeValue[1] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
+      <div
+        :style="{ bottom: verticalRangeValue[0] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
      <div class="layui-slider-vertical-line"></div>
-      <div class="layui-slider-vertical-rate"></div>
+      <div
+        :style="{
+          height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
+          bottom: verticalRangeValue[0] + '%',
+        }"
+        class="layui-slider-vertical-rate"
+      ></div>
    </div>

    <div
@@ -84,7 +101,7 @@
  </div>
 </template>
 <script setup lang="ts">
-import { defineProps, reactive, Ref, ref } from "vue";
+import { defineProps, reactive, Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";

@@ -98,6 +115,8 @@ interface LaySliderProps {
  step?: number;
  disabled?: boolean;
  range?: boolean;
+  verticalrange?: number[];
+  standardrange?: number[];
 }

 const props = withDefaults(defineProps<LaySliderProps>(), {
@@ -106,17 +125,14 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
  disabled: false,
 });

-let rangeValue: Ref<number[]> = ref([0, 0]);
-if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  rangeValue.value = props.modelValue;
-}
+// let rangeValue: Ref<number[]> = ref([0, 0]);
+let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
+// if (Array.isArray(props.modelValue)) {
+//   // eslint-disable-next-line vue/no-setup-props-destructure
+//   rangeValue.value = props.modelValue;
+// }

-let verticalRangeValue: Ref<number[]> = ref([0, 0]);
-if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  verticalRangeValue.value = props.modelValue;
-}
+let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");

 const standardtracker = ref<HTMLElement | null>(null);
 const verticaltracker = ref<HTMLElement | null>(null);
@@ -227,7 +243,7 @@ const starndardRangeMove = (e: MouseEvent) => {
    rangeValue.value[0] = 0;
  } else {
    let rate = (distance / tracker_rect.width) * 100;
-    let idx = moveNeighbor(Math.floor(rate));
+    let idx = moveNeighbors(Math.floor(rate), rangeValue);
    rangeValue.value[idx] = Math.floor(rate);
    if (rangeValue.value[1] > 100) {
      rangeValue.value[1] = 100;
@@ -239,12 +255,33 @@ const starndardRangeMove = (e: MouseEvent) => {
  emit("update:modelValue", rangeValue.value);
 };

-const verticalRangeMove = (e: MouseEvent) => {};
-
-function moveNeighbor(rate: number) {
-  let d1 = Math.abs(rate - rangeValue.value[0]);
-  let d2 = Math.abs(rate - rangeValue.value[1]);
+const verticalRangeMove = (e: MouseEvent) => {
+  if (!rangetracker2.value) {
+    return;
+  }
+  let tracker_rect = rangetracker2.value.getBoundingClientRect();
+  let origin_bottom = tracker_rect.bottom;
+  let point_bottom = e.clientY;
+  let distance = (point_bottom - origin_bottom) * -1;
+  if (distance < 0) {
+    rangeValue.value[0] = 0;
+  } else {
+    let rate = (distance / tracker_rect.height) * 100;
+    let idx = moveNeighbors(Math.floor(rate), verticalRangeValue);
+    verticalRangeValue.value[idx] = Math.floor(rate);
+    if (verticalRangeValue.value[1] > 100) {
+      verticalRangeValue.value[1] = 100;
+    }
+    if (verticalRangeValue.value[0] < 0) {
+      verticalRangeValue.value[0] = 0;
+    }
+  }
+  emit("update:modelValue", verticalRangeValue.value);
+};

+function moveNeighbors(rate: number, rangeValues: any) {
+  let d1 = Math.abs(rate - rangeValues.value[0]);
+  let d2 = Math.abs(rate - rangeValues.value[1]);
  if (d1 > d2) {
    return 1;
  } else {
--- a/src/module/step/index.less
+++ b/src/module/step/index.less
@@ -0,0 +1,296 @@
+@width-height-pace: 24px;
+@step-color: @step-success-color;
+@step-fail-color: #FF5722;
+@step-primary-color: #1E9FFF;
+@step-warning-color: #FFB800;
+@step-success-color: #5FB878;
+
+.lay-step{
+  display: flex;
+  flex-wrap: nowrap;
+  .lay-step-item{
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .is-item-center{
+    text-align: center;
+  }
+
+  .lay-step-item-last {
+    flex-grow: 0 !important;
+  }
+  .lay-step-item-pace{
+    cursor: pointer;
+    width: @width-height-pace;
+    height: @width-height-pace;
+    border: 1px #8D8D8D solid;
+    border-radius: 50%;
+    text-align: center;
+    line-height: @width-height-pace;
+    background: #FFFFFF;
+  }
+  .is-center{
+    margin: 0 auto;
+  }
+  .lay-step-item-active{
+    border: 1px @step-color solid;
+    color: @step-color;
+  }
+
+  .lay-step-item-wait{
+    border: 1px #000000 solid;
+    color: #000000;
+  }
+
+  .lay-step-item--success {
+    border: 1px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item--fail{
+    border: 1px @step-fail-color solid;
+    color: #FFFFFF;
+    background: @step-fail-color;
+  }
+
+  .lay-step-item--warning{
+    border: 1px @step-warning-color solid;
+    color: #FFFFFF;
+    background: @step-warning-color;
+  }
+  .lay-step-item--primary{
+    border: 1px @step-primary-color solid;
+    color: #FFFFFF;
+    background: @step-primary-color;
+  }
+
+  .lay-step-item-success {
+    border: 1px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item-fail{
+    border: 1px @step-fail-color solid;
+    color: #FFFFFF;
+    background: @step-fail-color;
+  }
+
+  .lay-step-item-warning{
+    border: 1px @step-warning-color solid;
+    color: #FFFFFF;
+    background: @step-warning-color;
+  }
+  .lay-step-item-primary{
+    border: 1px @step-primary-color solid;
+    color: #FFFFFF;
+    background: @step-primary-color;
+  }
+
+  .lay-step-item-content{
+    color: #8D8D8D;
+    cursor: pointer;
+    .lay-step-item-content-title{
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  .lay-step-item-content-row {
+    color: #8D8D8D;
+    position: absolute;
+    top: 5px;
+    left: 24px;
+    width: calc( 100% - 26px );
+    .lay-step-item-content-title{
+      word-wrap:break-word;
+      max-width: calc(100% - 8px);
+      font-weight: bold;
+      display: inline-block;
+      margin-left: 2px;
+      background: #ffffff;
+      padding: 0 8px;
+      font-size: 16px;
+    }
+  }
+
+  .lay-step-item-content-active{
+    color: @step-color;
+  }
+
+  .lay-step-item-content--success{
+    color: @step-color;
+  }
+  .lay-step-item-content--fail{
+    color: @step-fail-color;
+  }
+  .lay-step-item-content--warning{
+    color: @step-warning-color;
+  }
+  .lay-step-item-content--primary{
+    color: @step-primary-color;
+  }
+
+  .lay-step-item-content-wait{
+    color: #000000;
+  }
+  .lay-step-item-content-success{
+    color: @step-color;
+  }
+  .lay-step-item-content-fail{
+    color: @step-fail-color;
+  }
+  .lay-step-item-content-warning{
+    color: @step-warning-color;
+  }
+  .lay-step-item-content-primary{
+    color: @step-primary-color;
+  }
+
+
+  .lay-step-item-line{
+    position: relative;
+  }
+
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 50%;
+    // transform: translateY(-50%);
+    display: block;
+    height: 1px;
+    width: 100%;
+    background: #C9C5C5;
+  }
+  .is-line-center:before {
+    left: 50%;
+  }
+
+  .lay-step-item-line-active:before {
+    transition: background 150ms;
+    background: @step-success-color !important;
+  }
+
+  .lay-step-item-line-fail:before {
+    transition: background 150ms;
+    background: @step-fail-color !important;
+  }
+
+  .lay-step-item-line-warning:before {
+    transition: background 150ms;
+    background: @step-warning-color !important;
+  }
+
+  .lay-step-item-line-primary:before {
+    transition: background 150ms;
+    background: @step-primary-color !important;
+  }
+
+  .lay-step-simple{
+    height: 30px;
+    padding: 0 8px;
+    line-height: 30px;
+    color: #ffffff;
+    background-color: #cecece;
+    cursor: pointer;
+  }
+  .lay-step-item-simple{
+    padding: 0 18px;
+  }
+  .lay-step-item-simple:after{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    border: 15px solid;
+    border-color: transparent transparent transparent #cecece;
+    background-color: transparent;
+    border-radius: 0;
+    display: block;
+    height: auto;
+    width: auto;
+  }
+  .lay-step-item-simple:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    border: 15px solid;
+    border-color: transparent transparent transparent #cecece;
+    background-color: transparent;
+    border-radius: 0;
+    display: block;
+    height: auto;
+    width: auto;
+  }
+  .lay-step-item-simple-border:before{
+    left: 1px;
+    border-color: transparent transparent transparent #ffffff;
+  }
+
+  .lay-step-item-simple-active {
+    background-color: #9fd4ae;
+  }
+  .lay-step-item-simple-success {
+    background-color: @step-color;
+  }
+  .lay-step-item-simple-fail {
+    background-color: @step-fail-color;
+  }
+  .lay-step-item-simple-warning {
+    background-color: @step-warning-color;
+  }
+  .lay-step-item-simple-primary {
+    background-color: @step-primary-color;
+  }
+  .lay-step-item-simple-active-border:after{
+    border-color: transparent transparent transparent #9fd4ae !important;
+  }
+  .lay-step-item-simple-success-border:after{
+    border-color: transparent transparent transparent @step-success-color!important;
+  }
+  .lay-step-item-simple-fail-border:after{
+    border-color: transparent transparent transparent @step-fail-color!important;
+  }
+  .lay-step-item-simple-warning-border:after{
+    border-color: transparent transparent transparent @step-warning-color!important;
+  }
+  .lay-step-item-simple-primary-border:after{
+    border-color: transparent transparent transparent @step-primary-color!important;
+  }
+
+}
+.lay-step-column {
+  height: 100%;
+  flex-flow: column;
+  .lay-step-item-line{
+    position: relative;
+    height: 100%;
+    width: 24px;
+  }
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+   // transform: translateX(-50%);
+    display: block;
+    width: 1px;
+    height: 100%;
+    background: #C9C5C5;
+  }
+  .lay-step-item-content{
+    margin-left: 8px;
+  }
+  .is-vertical{
+    display: flex;
+  }
+}
--- a/src/module/step/index.ts
+++ b/src/module/step/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetup", Component);
+};
+
+export default Component as IDefineComponent;
--- a/src/module/step/index.vue
+++ b/src/module/step/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup name="layStep" lang="ts">
+import {
+  ref,
+  watch,
+  provide,
+  defineProps,
+  withDefaults,
+  defineEmits,
+} from "vue";
+import "./index.less";
+
+export interface LayStepProps {
+  active?: number;
+  center?: boolean;
+  direction?: string;
+  space?: string;
+  currentStatus?: string;
+  composition?: string;
+  simple?: boolean;
+}
+
+const props = withDefaults(defineProps<LayStepProps>(), {
+  active: 0,
+  center: false,
+  direction: "horizontal",
+  space: "auto",
+  currentStatus: "success",
+  composition: "default",
+  simple: false,
+});
+
+const steps = ref([]);
+
+const emits = defineEmits(["onChange"]);
+
+const change = (index) => {
+  emits("onChange", index - 1);
+};
+
+watch(steps, () => {
+  steps.value.forEach(
+    (instance: { setIndex: (arg0: any) => void }, index: any) => {
+      instance.setIndex(index);
+    }
+  );
+});
+
+provide("LayStep", {
+  props,
+  steps,
+  change,
+});
+</script>
+
+<style scoped></style>
--- a/src/module/stepItem/index.ts
+++ b/src/module/stepItem/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetupItem", Component);
+};
+
+export default Component as IDefineComponent;
--- a/src/module/stepItem/index.vue
+++ b/src/module/stepItem/index.vue
@@ -0,0 +1,197 @@
+<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 setup name="LayStepItem" lang="ts">
+import {
+  ref,
+  inject,
+  onMounted,
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  reactive,
+  defineProps,
+  withDefaults,
+} from "vue";
+
+import type { ComputedRef } from "vue";
+
+export interface LayStepItemProps {
+  title?: string;
+  content?: string;
+  icon?: string;
+  status?: string;
+}
+
+const props = withDefaults(defineProps<LayStepItemProps>(), {
+  title: "",
+  content: "",
+  icon: "",
+  status: "",
+});
+
+const index = ref(-1);
+const parents: any = inject("LayStep");
+const currentInstance: any = getCurrentInstance();
+const setIndex = (val: number) => {
+  index.value = val;
+};
+
+const onChange = (index) => {
+  parents.change(index);
+};
+
+const stepsCount = computed(() => {
+  return parents.steps.value.length;
+});
+
+const currentStatus = computed(() => {
+  return parents.props.currentStatus;
+});
+
+const simple = computed(() => {
+  return parents.props.simple;
+});
+
+const composition = computed(() => {
+  return parents.props.composition;
+});
+const isCurrent = computed(() => {
+  return parents.props.active;
+});
+
+const isCurrentBorder = computed(() => {
+  return parents.props.active + 1;
+});
+const space = computed(() => {
+  return parents.props.space;
+});
+
+const isVertical = computed(() => {
+  return parents.props.direction === "vertical";
+});
+
+const isCenter = computed(() => {
+  return parents.props.center;
+});
+
+const isLineActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active - 1;
+});
+
+const isWait: ComputedRef<boolean> = computed(() => {
+  return index.value === parents.props.active + 1;
+});
+
+const isSimpleActive: ComputedRef<boolean> = computed(() => {
+  return index.value - 1 <= parents.props.active;
+});
+
+const isActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active;
+});
+const isLast: ComputedRef<boolean> = computed(() => {
+  return (
+    parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
+  );
+});
+
+const isStart: ComputedRef<boolean> = computed(() => {
+  return parents.steps.value[0]?.itemId === currentInstance.uid;
+});
+
+const stepItemState = reactive({
+  itemId: computed(() => currentInstance?.uid),
+  setIndex,
+});
+
+parents.steps.value = [...parents.steps.value, stepItemState];
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  parents.steps.value = parents.steps.value.filter(
+    (instance: { itemId: any }) => instance.itemId !== currentInstance.uid
+  );
+});
+</script>
--- a/src/module/subMenu/index.ts
+++ b/src/module/subMenu/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySubMenu", Component);
+};
+
+export default Component as IDefineComponent;
--- a/src/module/subMenu/index.vue
+++ b/src/module/subMenu/index.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+export default {
+  name: "LaySubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, inject, Ref, useSlots } from "vue";
+
+const slots = useSlots();
+
+const props = defineProps<{
+  id: string;
+  title: string;
+}>();
+
+const isTree = inject("isTree");
+const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
+const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+
+const openHandle = function () {
+  if (openKeys.value.includes(props.id)) {
+    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+  } else {
+    openKeys.value.push(props.id);
+  }
+};
+
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+</script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+  >
+    <a href="javascript:void(0)" @click="openHandle()">
+      <slot v-if="slots.title" name="title"></slot>
+      <span v-else>{{ title }}</span>
+      <i
+        :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
+        class="layui-icon layui-icon-down layui-nav-more"
+      ></i>
+    </a>
+    <dl
+      class="layui-nav-child"
+      :class="[
+        isOpen && !isTree ? 'layui-show' : '',
+        !isTree ? 'layui-anim layui-anim-upbit' : '',
+      ]"
+    >
+      <slot></slot>
+    </dl>
+  </li>
+</template>
--- a/src/module/timelineItem/index.vue
+++ b/src/module/timelineItem/index.vue
@@ -1,6 +1,9 @@
 <template>
  <li class="layui-timeline-item">
-    <i class="layui-icon layui-timeline-axis"></i>
+    <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 }}
@@ -20,7 +23,9 @@ export default {
 </script>

 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, useSlots } from "vue";
+
+const slot = useSlots();

 export interface LayTimelineItemProps {
  title: string;
--- a/src/module/tree/index.less
+++ b/src/module/tree/index.less
@@ -0,0 +1,180 @@
+
+.layui-tree {
+  line-height: 22px;
+}
+
+.layui-tree .layui-form-checkbox {
+  margin: 0 !important;
+}
+
+.layui-tree-set {
+  width: 100%;
+  position: relative;
+}
+
+.layui-tree-pack {
+  display: none;
+  padding-left: 20px;
+  position: relative;
+}
+
+.layui-tree-iconClick,
+.layui-tree-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-tree-line .layui-tree-pack {
+  padding-left: 27px;
+}
+
+.layui-tree-line .layui-tree-set .layui-tree-set:after {
+  content: "";
+  position: absolute;
+  top: 14px;
+  left: -9px;
+  width: 17px;
+  height: 0;
+  border-top: 1px dotted #c0c4cc;
+}
+
+.layui-tree-entry {
+  position: relative;
+  padding: 3px 0;
+  height: 20px;
+  white-space: nowrap;
+}
+
+.layui-tree-entry:hover {
+  background-color: #eee;
+}
+
+.layui-tree-line .layui-tree-entry:hover {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
+  color: #999;
+  text-decoration: underline;
+  transition: 0.3s;
+}
+
+.layui-tree-main {
+  cursor: pointer;
+  padding-right: 10px;
+}
+
+.layui-tree-line .layui-tree-set:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -9px;
+  width: 0;
+  height: 100%;
+  border-left: 1px dotted #c0c4cc;
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before {
+  height: 13px;
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setHide:before {
+  height: 0;
+}
+
+.layui-tree-iconClick {
+  position: relative;
+  height: 20px;
+  line-height: 20px;
+  margin: 0 10px;
+  color: #c0c4cc;
+}
+
+.layui-tree-icon {
+  height: 12px;
+  line-height: 12px;
+  width: 12px;
+  text-align: center;
+  border: 1px solid #c0c4cc;
+}
+
+.layui-tree-iconClick .layui-icon {
+  font-size: 18px;
+}
+
+.layui-tree-icon .layui-icon {
+  font-size: 12px;
+  color: #666;
+}
+
+.layui-tree-iconArrow {
+  padding: 0 5px;
+}
+
+.layui-tree-iconArrow:after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 3px;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent transparent #c0c4cc;
+  transition: 0.5s;
+}
+
+.layui-tree-btnGroup,
+.layui-tree-editInput {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.layui-tree-spread
+> .layui-tree-entry
+> .layui-tree-iconClick
+> .layui-tree-iconArrow:after {
+  transform: rotate(90deg) translate(3px, 4px);
+}
+
+.layui-tree-txt {
+  display: inline-block;
+  vertical-align: middle;
+  color: #555;
+}
+
+.layui-tree-search {
+  margin-bottom: 15px;
+  color: #666;
+}
+
+.layui-tree-btnGroup .layui-icon {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 2px;
+  cursor: pointer;
+}
+
+.layui-tree-btnGroup .layui-icon:hover {
+  color: #999;
+  transition: 0.3s;
+}
+
+.layui-tree-entry:hover .layui-tree-btnGroup {
+  visibility: visible;
+}
+
+.layui-tree-editInput {
+  height: 20px;
+  line-height: 20px;
+  padding: 0 3px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.layui-tree-emptyText {
+  text-align: center;
+  color: #999;
+}
--- a/src/module/tree/index.vue
+++ b/src/module/tree/index.vue
@@ -1,9 +1,3 @@
-<!--
- * @Date: 2021-10-16 13:22:38
- * @LastEditors: 落小梅
- * @LastEditTime: 2021-10-16 13:53:14
- * @FilePath: \layui-vue\src\module\tree\new-tree\index.vue
-->
 <script lang="ts">
 export default {
  name: "LayTree",
@@ -16,6 +10,7 @@ import TreeNode from "./TreeNode.vue";
 import { computed } from "vue";
 import { useTree } from "./useTree";
 import { TreeData } from "./tree";
+import "./index.less";

 type StringFn = () => string;
 type StringOrNumber = string | number;