fix: merge code

2022-02-17 09:59:40 +08:00 · 2022-02-17 09:59:40 +08:00 · c5fb08e4fa
commit c5fb08e4fa
parent 62a36c0bbd dbfba278c1
97 changed files with 867 additions and 854 deletions
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint:prettier
+npx --no -- commitlint --edit $1
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -0,0 +1,21 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [2, 
+      "always",
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test'
+      ]
+    ],
+  },
+};
--- a/package.json
+++ b/package.json
@ -29,7 +29,11 @@
    "build:types": "rimraf types && tsc -d",
    "build:example": "vite build example",
    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
-    "lint:prettier": "prettier --write  'src/**/*'"
+    "lint:prettier": "prettier --write \"src/**/*.{vue,ts}\"",
+    "prepare": "husky install",
+    "postinstall": "npm run prepare",
+    "commit": "git-cz",
+    "commit:push": "git add . && git-cz && git push"
  },
  "dependencies": {
    "@layui/hooks-vue": "^0.1.6",
@ -46,6 +50,8 @@
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-typescript": "^7.15.0",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
    "@rollup/plugin-babel": "^5.3.0",
    "@types/markdown-it": "^12.2.3",
    "@types/markdown-it-container": "^2.0.4",
@ -56,12 +62,13 @@
    "@vue/compiler-sfc": "^3.2.30",
    "@vue/server-renderer": "^3.2.30",
    "commitizen": "^4.2.4",
-    "cz-conventional-changelog": "3.3.0",
+    "cz-conventional-changelog": "^3.3.0",
    "escape-html": "^1.0.3",
    "eslint": "^8.5.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.2.0",
+    "husky": "^7.0.4",
    "less": "^4.1.2",
    "markdown-it-container": "^3.0.0",
    "prettier": "^2.5.1",
@ -81,5 +88,15 @@
    "current node",
    "last 2 versions and > 2%",
    "ie > 10"
-  ]
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  }
 }
--- a/src/component/avatar/index.vue
+++ b/src/component/avatar/index.vue
@ -13,9 +13,7 @@ export interface LayAvatarProps {
  radius?: boolean;
 }

-const props = withDefaults(defineProps<LayAvatarProps>(), {
-  
-});
+const props = withDefaults(defineProps<LayAvatarProps>(), {});
 </script>

 <template>
--- a/src/component/avatarList/index.vue
+++ b/src/component/avatarList/index.vue
@ -4,8 +4,7 @@ export default {
 };
 </script>

-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>

 <template>
  <div class="layui-avatar-list">
--- a/src/component/backTop/index.less
+++ b/src/component/backTop/index.less
@ -25,13 +25,13 @@
  }
 }

-.layui-backtop-medium{
+.layui-backtop-medium {
  width: @width - 10px;
  height: @height - 10px;
  font-size: 30px;
 }

-.layui-backtop-small{
+.layui-backtop-small {
  width: @width - 20px;
  height: @height - 20px;
  font-size: 20px;
--- a/src/component/backTop/index.vue
+++ b/src/component/backTop/index.vue
@ -5,13 +5,7 @@ export default {
 </script>

 <script lang="ts" setup>
-import {
-  ref,
-  shallowRef,
-  withDefaults,
-  computed,
-  onMounted,
-} from "vue";
+import { ref, shallowRef, withDefaults, computed, onMounted } from "vue";
 import LayIcon from "../icon/index";
 import "./index.less";

@ -50,15 +44,15 @@ let visible = ref(props.showHeight === 0);

 const classBacktop = computed(() => {
  return {
-    'layui-backtop-medium': props.size === "medium",
-    'layui-backtop-small': props.size === "small"
-  }
+    "layui-backtop-medium": props.size === "medium",
+    "layui-backtop-small": props.size === "small",
+  };
 });

 const borderRadius = computed(() => {
  if (props.circle) {
-    return "50%"
-  };
+    return "50%";
+  }
  return typeof props.borderRadius === "number"
    ? `${props.borderRadius}px`
    : props.borderRadius;
@ -132,13 +126,15 @@ const getScrollTarget = () => {
    return getScrollParent(backtopRef.value!, false);
  } else {
    const targetElement = document.querySelector<HTMLElement>(props.target);
-    if (!targetElement){
+    if (!targetElement) {
      throw new Error(`target is not existed: ${props.target}`);
    }
    // 特定容器内部显示
    if (props.position === "absolute") {
-      if (!targetElement.parentElement){
-        throw new Error( `target parent element is not existed: ${props.target}`);
+      if (!targetElement.parentElement) {
+        throw new Error(
+          `target parent element is not existed: ${props.target}`
+        );
      }
      targetElement.parentElement.style.position = "relative";
      // backtopRef.value!.style.position = props.position;
@ -163,7 +159,9 @@ const getScrollParent = (
    if (excludeStaticParent && style.position === "static") {
      continue;
    }
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)){
+    if (
+      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+    ) {
      return parent;
    }
  }
--- a/src/component/breadcrumb/index.vue
+++ b/src/component/breadcrumb/index.vue
@ -11,11 +11,9 @@ export interface LayBreadcrumbProps {
  separator?: string;
 }

-const props = withDefaults(defineProps<LayBreadcrumbProps>(),
-  {
+const props = withDefaults(defineProps<LayBreadcrumbProps>(), {
  separator: "/",
-  }
-);
+});

 provide("separator", props.separator);
 </script>
--- a/src/component/breadcrumbItem/index.vue
+++ b/src/component/breadcrumbItem/index.vue
@ -12,8 +12,8 @@

 <script lang="ts">
 export default {
-  name: "LayBreadcrumbItem"
-}
+  name: "LayBreadcrumbItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/button/index.vue
+++ b/src/component/button/index.vue
@ -31,11 +31,11 @@ const props = withDefaults(defineProps<LayButtonProps>(), {

 const emit = defineEmits(["click"]);

-const onClick = (event : any) => {
-  if(!props.disabled) {
+const onClick = (event: any) => {
+  if (!props.disabled) {
    emit("click", event);
  }
-}
+};

 const classes = computed(() => {
  return [
--- a/src/component/card/index.vue
+++ b/src/component/card/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayCard"
-}
+  name: "LayCard",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/carousel/index.vue
+++ b/src/component/carousel/index.vue
@ -1,17 +1,11 @@
 <script lang="ts">
 export default {
-  name: "LayCarousel"
-}
+  name: "LayCarousel",
+};
 </script>

 <script setup lang="ts">
-import {
-  withDefaults,
-  provide,
-  useSlots,
-  ref,
-  computed,
-} from "vue";
+import { withDefaults, provide, useSlots, ref, computed } from "vue";

 const slot = useSlots() as any;
 const slots = slot.default && (slot.default() as any[]);
--- a/src/component/carouselItem/index.vue
+++ b/src/component/carouselItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayCarouselItem"
-}
+  name: "LayCarouselItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/collapse/index.vue
+++ b/src/component/collapse/index.vue
@ -1,28 +1,21 @@
 <script lang="ts">
 export default {
-  name:"LayCollapse"
-}
+  name: "LayCollapse",
+};
 </script>

 <script setup lang="ts">
-import {
-  withDefaults,
-  provide,
-  ref,
-  watch,
-} from "vue";
+import { withDefaults, provide, ref, watch } from "vue";

 export interface LayCollapseProps {
  modelValue?: number | string | [];
  accordion?: boolean;
 }

-const props = withDefaults(defineProps<LayCollapseProps>(),
-  {
+const props = withDefaults(defineProps<LayCollapseProps>(), {
  modelValue: () => [],
  accordion: false,
-  }
-);
+});

 // 监听传入的值
 watch(
--- a/src/component/collapseItem/index.vue
+++ b/src/component/collapseItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name:"LayCollapseItem"
-}
+  name: "LayCollapseItem",
+};
 </script>

 <script setup lang="ts">
@ -13,11 +13,9 @@ export interface LayCollapseItemProps {
  disabled?: boolean;
 }

-const props = withDefaults(defineProps<LayCollapseItemProps>(),
-  {
+const props = withDefaults(defineProps<LayCollapseItemProps>(), {
  disabled: false,
-  }
-);
+});

 const { accordion, activeValues, emit } = inject("layCollapse") as any;

--- a/src/component/colorPicker/index.less
+++ b/src/component/colorPicker/index.less
@ -75,7 +75,8 @@
  position: relative;
  height: 10px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
+  background: #fff
+    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
  background-size: 10px 10px;
 }

--- a/src/component/colorPicker/index.vue
+++ b/src/component/colorPicker/index.vue
@ -110,13 +110,7 @@ export interface LayColorPicker {

 const props = withDefaults(defineProps<LayColorPicker>(), {
  modelValue: { r: 217, g: 128, b: 95, a: 1 },
-  preset: [
-    "#009688",
-    "#1e9fff",
-    "#ffb800",
-    "#ff5722",
-    "#5fb878",
-  ]
+  preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"],
 });

 const saturationValue = ref<null | HTMLElement>(null);
--- a/src/component/container/interface.ts
+++ b/src/component/container/interface.ts
@ -1 +0,0 @@
-
--- a/src/component/countUp/index.vue
+++ b/src/component/countUp/index.vue
@ -1,6 +1,6 @@
 <template>
  <slot name="prefix"></slot>
-  <span ref="counterRef" style="font-family:sans-serif;" />
+  <span ref="counterRef" style="font-family: sans-serif" />
  <slot name="suffix"></slot>
 </template>

@ -11,9 +11,9 @@ export default {
 </script>

 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import { CountUp } from 'countup.js'
-import type { CountUpOptions } from 'countup.js'
+import { onMounted, ref, watch } from "vue";
+import { CountUp } from "countup.js";
+import type { CountUpOptions } from "countup.js";

 export interface LayCountupProps {
  endVal?: number; //显示的值
@ -30,51 +30,58 @@ export interface LayCountupProps {
 const props = withDefaults(defineProps<LayCountupProps>(), {
  endVal: 0,
  option: () => {
-    return {}
-  }
+    return {};
+  },
 });

 const counterRef = ref<HTMLDivElement | null>(null);
 const instance = ref<CountUp | null>(null);
-const {decimalPlaces,useGrouping,separator,useEasing,duration,prefix,suffix} = props;
+const {
+  decimalPlaces,
+  useGrouping,
+  separator,
+  useEasing,
+  duration,
+  prefix,
+  suffix,
+} = props;
 const defaultOptions: CountUpOptions = {
  startVal: 0, // 开始数字
  decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
  useEasing: useEasing ? useEasing : true, // 使用缓动动画
  duration: duration ? duration : 2, // 动画持续时间
  useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
-  separator:separator ? separator : ",", // 千位分隔符
-  decimal:".", // 小数点分隔符
+  separator: separator ? separator : ",", // 千位分隔符
+  decimal: ".", // 小数点分隔符
  prefix: prefix ? prefix : "", // 前缀
  suffix: suffix ? suffix : "", // 后缀
-}
+};

 watch(
  () => props.endVal,
  () => {
-    update(props.endVal)
+    update(props.endVal);
  }
 );

 onMounted(() => {
-  createCounter()
-})
+  createCounter();
+});

 const createCounter = () => {
-  if (!counterRef.value) return
-  const opts: CountUpOptions = Object.assign(defaultOptions, props.option)
+  if (!counterRef.value) return;
+  const opts: CountUpOptions = Object.assign(defaultOptions, props.option);
  instance.value = new CountUp(counterRef?.value, props.endVal, opts);
  start();
-}
+};

 const start = () => {
-  if (!instance.value) return
+  if (!instance.value) return;
  instance?.value.start();
-}
+};

 const update = (newEndVal: number) => {
-  if (!instance.value) return
+  if (!instance.value) return;
  instance?.value.update(newEndVal);
-}
-
+};
 </script>
--- a/src/component/dropdownItem/index.vue
+++ b/src/component/dropdownItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayDropdownItem"
-}
+  name: "LayDropdownItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/exception/index.less
+++ b/src/component/exception/index.less
@ -1,5 +1,5 @@
-.layui-exception{
-    .layui-exception-image{
+.layui-exception {
+  .layui-exception-image {
    width: 50%;
    display: inline-block;
    vertical-align: top;
@ -21,18 +21,18 @@
      background-image: url(./image/500.svg);
    }
  }
-    .layui-exception-details{
+  .layui-exception-details {
    .layui-exception-details-content {
      margin-left: 100px;
-            .layui-exception-details-title{
+      .layui-exception-details-title {
        font-size: 60px;
        color: #434e59;
        margin-bottom: 24px;
        font-weight: 600;
      }
-            .layui-exception-details-describe{
+      .layui-exception-details-describe {
        font-size: 18px;
-                color: rgba(0, 0, 0, .45);
+        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 26px;
      }
    }
--- a/src/component/exception/index.vue
+++ b/src/component/exception/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-    name: "LayException"
-}
+  name: "LayException",
+};
 </script>
 <script setup lang="ts">
 import { useSlots } from "vue";
@ -17,7 +17,7 @@ const slots = useSlots();

 const props = withDefaults(defineProps<LayDropdownProps>(), {
  title: "Exception",
-  describe: "describe"
+  describe: "describe",
 });
 </script>
 <template>
@ -25,16 +25,16 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
    <div class="layui-exception-image">
      <slot name="image" v-if="slots.default"></slot>
      <template v-else>
-                <div v-if="status=='401'" class="error-401" />
-                <div v-if="status=='403'" class="error-403" />
-                <div v-if="status=='404'" class="error-404" />
-                <div v-if="status=='500'" class="error-500" />
+        <div v-if="status == '401'" class="error-401" />
+        <div v-if="status == '403'" class="error-403" />
+        <div v-if="status == '404'" class="error-404" />
+        <div v-if="status == '500'" class="error-500" />
      </template>
    </div>
    <div class="layui-exception-details">
      <div class="layui-exception-details-content">
-                <div class="layui-exception-details-title">{{title}}</div>
-                <div class="layui-exception-details-describe">{{describe}}</div>
+        <div class="layui-exception-details-title">{{ title }}</div>
+        <div class="layui-exception-details-describe">{{ describe }}</div>
        <div class="layui-exception-details-operate">
          <slot name="action"></slot>
        </div>
--- a/src/component/exception/interface.ts
+++ b/src/component/exception/interface.ts
@ -1 +0,0 @@
-
--- a/src/component/field/index.less
+++ b/src/component/field/index.less
@ -1,4 +1,3 @@
-
@import "../../theme/variable.less";

@field-border-color: var(--field-border-color);
--- a/src/component/field/index.vue
+++ b/src/component/field/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayField"
-}
+  name: "LayField",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/form/index.vue
+++ b/src/component/form/index.vue
@ -7,11 +7,7 @@ export default {
 <script setup lang="ts">
 import { toRefs, provide, reactive, onMounted } from "vue";
 import { Rule, ValidateError, ValidateMessages } from "async-validator";
-import {
-  LayFormItemContext,
-  FormCallback,
-  modelType,
-} from "../../types/form";
+import { LayFormItemContext, FormCallback, modelType } from "../../types/form";

 export interface LayFormProps {
  model?: modelType;
@ -24,16 +20,14 @@ export interface LayFormProps {
  useCN?: boolean;
 }

-const props = withDefaults(defineProps<LayFormProps>(),
-  {
+const props = withDefaults(defineProps<LayFormProps>(), {
  model: function () {
    return {};
  },
  useCN: true,
  requiredIcons: "",
  initValidate: false,
-  }
-);
+});

 const formItems: LayFormItemContext[] = [];
 const formItemMap: { [key: string]: LayFormItemContext } = {};
@ -144,7 +138,7 @@ const addField = function (item: LayFormItemContext) {
 defineExpose({ validate, clearValidate, reset });

 provide(
-  'LayForm',
+  "LayForm",
  reactive({
    formItems,
    addField,
--- a/src/component/formItem/index.less
+++ b/src/component/formItem/index.less
@ -10,7 +10,8 @@
  .layui-input-block,
  .layui-input-inline {
    .layui-form-danger {
-      &, .layui-input {
+      &,
+      .layui-input {
        border-color: #ff5722 !important;
      }
    }
--- a/src/component/formItem/index.vue
+++ b/src/component/formItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: 'LayFormItem'
-}
+  name: "LayFormItem",
+};
 </script>

 <script setup lang="ts">
@ -40,13 +40,11 @@ export interface LayFormItemProps {
  required?: boolean;
 }

-const props = withDefaults(defineProps<LayFormItemProps>(),
-  {
+const props = withDefaults(defineProps<LayFormItemProps>(), {
  mode: "block",
-  }
-);
+});

-const layForm = inject('LayForm', {} as LayFormContext);
+const layForm = inject("LayForm", {} as LayFormContext);
 const formItemRef = ref<HTMLDivElement>();
 const slotParent = ref<HTMLDivElement>();

--- a/src/component/iconPicker/index.vue
+++ b/src/component/iconPicker/index.vue
@ -80,8 +80,8 @@

 <script lang="ts">
 export default {
-  name: "LayIconPicker"
-}
+  name: "LayIconPicker",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/input/index.vue
+++ b/src/component/input/index.vue
@ -1,12 +1,12 @@
 <script lang="ts">
 export default {
-  name: "LayInput"
-}
+  name: "LayInput",
+};
 </script>

 <script setup lang="ts">
-import "./index.less"
-import { useI18n } from 'vue-i18n'
+import "./index.less";
+import { useI18n } from "vue-i18n";

 const { t } = useI18n();

@ -18,8 +18,7 @@ export interface LayInputProps {
  placeholder?: string;
 }

-const props = withDefaults(defineProps<LayInputProps>(), {
-});
+const props = withDefaults(defineProps<LayInputProps>(), {});

 const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);

--- a/src/component/inputNumber/index.vue
+++ b/src/component/inputNumber/index.vue
@ -9,12 +9,7 @@ import layButton from "../button/index";
 import layIcon from "../icon/index";
 import layInput from "../input/index";
 import "./index.less";
-import {
-  ref,
-  watch,
-  withDefaults,
-  computed,
-} from "vue";
+import { ref, watch, withDefaults, computed } from "vue";

 export interface LayInputNumberProps {
  modelValue?: number;
--- a/src/component/line/index.vue
+++ b/src/component/line/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayLine"
-}
+  name: "LayLine",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/logo/index.vue
+++ b/src/component/logo/index.vue
@ -6,9 +6,8 @@

 <script lang="ts">
 export default {
-  name: "LayLogo"
-}
+  name: "LayLogo",
+};
 </script>

-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
--- a/src/component/menu/index.less
+++ b/src/component/menu/index.less
@ -5,8 +5,8 @@
  left: calc(100% + 5px);
 }

-.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit
-, .layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
+.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit,
+.layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
  top: 0px;
  left: calc(-100% - 20px);
 }
@ -280,7 +280,7 @@
 .layui-nav-light {
  background-color: #ffffff;
  * {
-    color: grey!important;
+    color: grey !important;
  }
  .layui-nav-itemed > .layui-nav-child {
    background-color: rgba(0, 0, 0, 0.02);
@ -293,7 +293,7 @@
 }

 .layui-nav-tree .layui-this * {
-  color: white!important;
+  color: white !important;
 }

 .layui-nav-tree.inverted .layui-this,
@ -308,7 +308,7 @@
  border-radius: 4px;
 }

-.layui-nav-tree.inverted .layui-this > a{
+.layui-nav-tree.inverted .layui-this > a {
  padding: 5px 24px 5px 24px;
 }

--- a/src/component/menu/index.vue
+++ b/src/component/menu/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayMenu"
-}
+  name: "LayMenu",
+};
 </script>

 <script setup lang="ts">
@ -23,9 +23,9 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
  selectedKey: "",
  openKeys: () => [],
  tree: false,
-  theme: 'dark',
+  theme: "dark",
  inverted: false,
-  level: false
+  level: false,
 });

 const isTree = computed(() => props.tree);
@ -54,7 +54,15 @@ 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' ]">
+  <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>
--- a/src/component/menuItem/index.vue
+++ b/src/component/menuItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayMenuItem"
-}
+  name: "LayMenuItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/page/index.vue
+++ b/src/component/page/index.vue
@ -6,7 +6,7 @@ export default {

 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";

 export interface LayPageProps {
  total: number;
@ -116,7 +116,7 @@ watch(currentPage, function () {
      @click="prev()"
    >
      <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>{{ t('page.prev') }}</template>
+      <template v-else>{{ t("page.prev") }}</template>
    </a>
    <template v-if="showPage">
      <template v-for="index of totalPage" :key="index">
@ -138,7 +138,7 @@ watch(currentPage, function () {
      @click="next()"
    >
      <slot v-if="slots.next" name="next"></slot>
-      <template v-else>{{ t('page.next') }}</template>
+      <template v-else>{{ t("page.next") }}</template>
    </a>
    <span v-if="showLimit" class="layui-laypage-limits">
      <select v-model="inlimit">
--- a/src/component/page/interface.ts
+++ b/src/component/page/interface.ts
@ -1 +0,0 @@
-
--- a/src/component/panel/index.less
+++ b/src/component/panel/index.less
@ -1,6 +1,5 @@
@import "../../theme/variable.less";

-
@panel-border-color: var(--panel-border-color);
@panel-border-radius: var(--panel-border-radius);
@panel-fore-color: var(--panel-fore-color);
--- a/src/component/popper/index.vue
+++ b/src/component/popper/index.vue
@ -37,17 +37,14 @@ export interface LayPopperProps {
  isCanHide?: boolean;
 }

-const props = withDefaults(defineProps<LayPopperProps>(),
-  {
-    position: 'top',
+const props = withDefaults(defineProps<LayPopperProps>(), {
+  position: "top",
  isDark: true,
  disabled: false,
  enterable: true,
  isCanHide: true,
  trigger: "hover",
-  }
-);
-
+});

 const EVENT_MAP: any = {
  hover: ["mouseenter", null, "mouseleave", false],
@ -66,18 +63,21 @@ const innnerPosition = ref(props.position);
 const innerVisible = ref(!props.isCanHide);
 const isExist = ref(!props.isCanHide);

-watch(() => props.isCanHide, (val) => {
+watch(
+  () => props.isCanHide,
+  (val) => {
    innerVisible.value = !val;
-});
+  }
+);

 watch(innerVisible, (val) => {
  invokeShowPosistion();
 });

 watch(popper, (val) => {
-  if (props.trigger === 'hover' && props.enterable) {
-    on(popper.value, EVENT_MAP['hover'][0], doShow);
-    on(popper.value, EVENT_MAP['hover'][2], doHidden);
+  if (props.trigger === "hover" && props.enterable) {
+    on(popper.value, EVENT_MAP["hover"][0], doShow);
+    on(popper.value, EVENT_MAP["hover"][2], doHidden);
  }
 });

@ -92,7 +92,7 @@ const doShow = function () {
  if (!props.disabled) {
    if (!isExist.value) {
      isExist.value = true;
-        setTimeout(()=>innerVisible.value = true, 0);
+      setTimeout(() => (innerVisible.value = true), 0);
    } else {
      innerVisible.value = true;
    }
@ -110,7 +110,7 @@ const doHidden = function (e: MouseEvent) {
  }
  innerVisible.value = false;
  innnerPosition.value = props.position;
-  style.value = { top: -window.innerHeight + "px", left: 0 }
+  style.value = { top: -window.innerHeight + "px", left: 0 };
 };

 // 计算位置显示
--- a/src/component/quote/index.vue
+++ b/src/component/quote/index.vue
@ -12,11 +12,13 @@ export interface LayQuoteProps {
 }

 const props = defineProps<LayQuoteProps>();
-
 </script>

 <template>
-  <blockquote class="layui-quote" :class="[type ? `layui-quote-${props.type}` : '']">
+  <blockquote
+    class="layui-quote"
+    :class="[type ? `layui-quote-${props.type}` : '']"
+  >
    <slot></slot>
  </blockquote>
 </template>
--- a/src/component/radio/index.vue
+++ b/src/component/radio/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayRadio"
-}
+  name: "LayRadio",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/result/index.less
+++ b/src/component/result/index.less
@ -1,28 +1,24 @@
 .result {
  text-align: center;
-
 }
 .result .success svg {
-	color: #32C682;
+  color: #32c682;
  text-align: center;
  margin-top: 40px;
-
 }
 .result .failure svg {
  color: #f56c6c;
  text-align: center;
  margin-top: 40px;
-
 }
 .result .title {
  margin-top: 25px;
-
 }
 .result .desc {
  margin-top: 25px;
  width: 60%;
  margin-left: 20%;
-	color: rgba(0, 0, 0, .45);
+  color: rgba(0, 0, 0, 0.45);
 }
 .result .content {
  margin-top: 20px;
--- a/src/component/row/index.less
+++ b/src/component/row/index.less
@ -122,7 +122,6 @@
 }

@media screen and (min-width: 768px) {
-
  .layui-hide-sm {
    display: none !important;
  }
@ -143,7 +142,6 @@
 }

@media screen and (min-width: 992px) {
-
  .layui-hide-md {
    display: none !important;
  }
@ -164,7 +162,6 @@
 }

@media screen and (min-width: 1200px) {
-
  .layui-hide-lg {
    display: none !important;
  }
--- a/src/component/scroll/index.vue
+++ b/src/component/scroll/index.vue
@ -1,11 +1,10 @@
 <script lang="ts">
 export default {
-  name: "LayScroll"
-}
+  name: "LayScroll",
+};
 </script>

-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>

 <template>
  <div class="layui-side-scroll">
--- a/src/component/select/index.less
+++ b/src/component/select/index.less
@ -40,7 +40,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
  }
 }

-
 .layui-select {
  height: 38px;
  line-height: 1.3;
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-	name: "LaySelect"
-}
+  name: "LaySelect",
+};
 </script>

 <script setup lang="ts">
@ -39,16 +39,13 @@ watch(isClickOutside, () => {
  }
 });

-const props = withDefaults(
-	defineProps<LaySelectProps>(),
-	{
+const props = withDefaults(defineProps<LaySelectProps>(), {
  modelValue: null,
  placeholder: "请选择",
  disabled: false,
  showEmpty: true,
  multiple: false,
-	}
-);
+});

 const openState = ref(false);

--- a/src/component/selectOption/index.vue
+++ b/src/component/selectOption/index.vue
@ -15,11 +15,9 @@ export interface LaySelectOptionProps {
  disabled?: boolean;
 }

-const props = withDefaults(defineProps<LaySelectOptionProps>(),
-	{
+const props = withDefaults(defineProps<LaySelectOptionProps>(), {
  disabled: false,
-	}
-);
+});

 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 const selectItem = inject("selectItem") as Ref<SelectItem>;
--- a/src/component/skeleton/index.less
+++ b/src/component/skeleton/index.less
@ -1,5 +1,4 @@
 .lay-skeleton {
-  
  .lay-skeleton-item {
    height: 16px;
    border-radius: 5px;
--- a/src/component/skeleton/index.ts
+++ b/src/component/skeleton/index.ts
@ -1,8 +1,8 @@
-import type { App } from 'vue'
-import Component from './index.vue'
+import type { App } from "vue";
+import Component from "./index.vue";

 Component.install = (app: App) => {
-    app.component(Component.name, Component)
-}
+  app.component(Component.name, Component);
+};

 export default Component;
--- a/src/component/skeleton/index.vue
+++ b/src/component/skeleton/index.vue
@ -1,13 +1,13 @@
 <script lang="ts">
 export default {
-  name: "LaySkeleton"
-}
+  name: "LaySkeleton",
+};
 </script>

 <script setup lang="ts">
-import LaySkeletonItem from '../skeletonItem/index.vue'
-import './index.less'
-import { withDefaults} from "vue";
+import LaySkeletonItem from "../skeletonItem/index.vue";
+import "./index.less";
+import { withDefaults } from "vue";

 export interface LaySkeletonProps {
  rows?: number;
@ -23,15 +23,19 @@ const props = withDefaults(defineProps<LaySkeletonProps>(), {
 </script>

 <template>
-  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+  <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': '']"
+            item === 1 ? 'lay-skeleton-first' : '',
+            item === rows ? 'lay-skeleton-last' : '',
+          ]"
          type="p"
        ></lay-skeleton-item>
      </slot>
--- a/src/component/skeletonItem/index.ts
+++ b/src/component/skeletonItem/index.ts
@ -1,8 +1,8 @@
-import type { App } from 'vue'
-import Component from './index.vue'
+import type { App } from "vue";
+import Component from "./index.vue";

 Component.install = (app: App) => {
-    app.component(Component.name, Component)
-}
+  app.component(Component.name, Component);
+};

 export default Component;
--- a/src/component/skeletonItem/index.vue
+++ b/src/component/skeletonItem/index.vue
@ -1,24 +1,27 @@
 <script lang="ts">
 export default {
-  name: "LaySkeletonItem"
-}
+  name: "LaySkeletonItem",
+};
 </script>

 <script setup lang="ts">
-import { withDefaults} from "vue";
+import { withDefaults } from "vue";

 export interface LaySkeletonProps {
  type?: string;
 }

 const props = withDefaults(defineProps<LaySkeletonProps>(), {
-  type: 'p',
+  type: "p",
 });
 </script>

 <template>
-  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
-    <div v-if="type==='image'" >
+  <div
+    :class="['lay-skeleton-item', `lay-skeleton-type--${type}`]"
+    v-bind="$attrs"
+  >
+    <div v-if="type === 'image'">
      <lay-icon type="layui-icon-picture"></lay-icon>
    </div>
  </div>
--- a/src/component/slider/index.vue
+++ b/src/component/slider/index.vue
@ -6,13 +6,19 @@
      class="layui-slider-vrange"
      v-if="range"
    >
-        <lay-tooltip :content="'' + verticalRangeValue[1]" :is-can-hide="tooptipHide">
+      <lay-tooltip
+        :content="'' + verticalRangeValue[1]"
+        :is-can-hide="tooptipHide"
+      >
        <div
          :style="{ bottom: verticalRangeValue[1] + '%' }"
          class="layui-slider-vertical-btn"
        ></div>
      </lay-tooltip>
-        <lay-tooltip :content="'' + verticalRangeValue[0]" :is-can-hide="tooptipHide">
+      <lay-tooltip
+        :content="'' + verticalRangeValue[0]"
+        :is-can-hide="tooptipHide"
+      >
        <div
          :style="{ bottom: verticalRangeValue[0] + '%' }"
          class="layui-slider-vertical-btn"
--- a/src/component/splitPanel/index.less
+++ b/src/component/splitPanel/index.less
@ -1,4 +1,4 @@
-.lay-split-panel{
+.lay-split-panel {
  height: 100%;
  display: flex;
  position: relative;
@ -7,12 +7,12 @@
    flex-grow: 1;
    border: 1px #eeeeee solid;
  }
-  .lay-split-panel-item-move{
+  .lay-split-panel-item-move {
    user-select: none;
    pointer-events: none;
    cursor: col-resize;
  }
-  .lay-split-panel-line{
+  .lay-split-panel-line {
    height: 100%;
    width: 3px;
    border: 1px #eeeeee solid;
@ -22,7 +22,7 @@
    cursor: col-resize;
    display: flex;
    align-items: center;
-    &:before{
+    &:before {
      content: "";
      height: 6px;
      width: 100%;
@ -33,15 +33,15 @@
  }
 }

-.lay-split-panel-vertical{
+.lay-split-panel-vertical {
  flex-direction: column;
  position: relative;
-  .lay-split-panel-item-move{
+  .lay-split-panel-item-move {
    user-select: none;
    pointer-events: none;
    cursor: row-resize;
  }
-  .lay-split-panel-line{
+  .lay-split-panel-line {
    display: flex;
    justify-content: center;
    width: 100%;
@ -51,7 +51,7 @@
    background-color: #fafafa;
    border-top: none;
    border-bottom: none;
-    &:before{
+    &:before {
      content: "";
      height: 100%;
      width: 6px;
--- a/src/component/splitPanel/index.vue
+++ b/src/component/splitPanel/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "laySplitPanel"
-}
+  name: "laySplitPanel",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/splitPanelItem/index.vue
+++ b/src/component/splitPanelItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LaySplitPanelItem"
-}
+  name: "LaySplitPanelItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/step/index.less
+++ b/src/component/step/index.less
@ -1,111 +1,111 @@
@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;
+@step-fail-color: #ff5722;
+@step-primary-color: #1e9fff;
+@step-warning-color: #ffb800;
+@step-success-color: #5fb878;

-.lay-step{
+.lay-step {
  display: flex;
  flex-wrap: nowrap;
-  .lay-step-item{
+  .lay-step-item {
    flex-grow: 1;
    position: relative;
  }

-  .is-item-center{
+  .is-item-center {
    text-align: center;
  }

  .lay-step-item-last {
    flex-grow: 0 !important;
  }
-  .lay-step-item-pace{
+  .lay-step-item-pace {
    cursor: pointer;
    width: @width-height-pace;
    height: @width-height-pace;
-    border: 1px #8D8D8D solid;
+    border: 1px #8d8d8d solid;
    border-radius: 50%;
    text-align: center;
    line-height: @width-height-pace;
-    background: #FFFFFF;
+    background: #ffffff;
  }
-  .is-center{
+  .is-center {
    margin: 0 auto;
  }
-  .lay-step-item-active{
+  .lay-step-item-active {
    border: 1px @step-color solid;
    color: @step-color;
  }

-  .lay-step-item-wait{
+  .lay-step-item-wait {
    border: 1px #000000 solid;
    color: #000000;
  }

  .lay-step-item--success {
    border: 1px @step-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-color;
  }

-  .lay-step-item--fail{
+  .lay-step-item--fail {
    border: 1px @step-fail-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-fail-color;
  }

-  .lay-step-item--warning{
+  .lay-step-item--warning {
    border: 1px @step-warning-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-warning-color;
  }
-  .lay-step-item--primary{
+  .lay-step-item--primary {
    border: 1px @step-primary-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-primary-color;
  }

  .lay-step-item-success {
    border: 1px @step-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-color;
  }

-  .lay-step-item-fail{
+  .lay-step-item-fail {
    border: 1px @step-fail-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-fail-color;
  }

-  .lay-step-item-warning{
+  .lay-step-item-warning {
    border: 1px @step-warning-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-warning-color;
  }
-  .lay-step-item-primary{
+  .lay-step-item-primary {
    border: 1px @step-primary-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
    background: @step-primary-color;
  }

-  .lay-step-item-content{
-    color: #8D8D8D;
+  .lay-step-item-content {
+    color: #8d8d8d;
    cursor: pointer;
-    .lay-step-item-content-title{
+    .lay-step-item-content-title {
      font-weight: bold;
      font-size: 16px;
    }
  }

  .lay-step-item-content-row {
-    color: #8D8D8D;
+    color: #8d8d8d;
    position: absolute;
    top: 5px;
    left: 24px;
-    width: calc( 100% - 26px );
-    .lay-step-item-content-title{
-      word-wrap:break-word;
+    width: calc(100% - 26px);
+    .lay-step-item-content-title {
+      word-wrap: break-word;
      max-width: calc(100% - 8px);
      font-weight: bold;
      display: inline-block;
@ -116,41 +116,40 @@
    }
  }

-  .lay-step-item-content-active{
+  .lay-step-item-content-active {
    color: @step-color;
  }

-  .lay-step-item-content--success{
+  .lay-step-item-content--success {
    color: @step-color;
  }
-  .lay-step-item-content--fail{
+  .lay-step-item-content--fail {
    color: @step-fail-color;
  }
-  .lay-step-item-content--warning{
+  .lay-step-item-content--warning {
    color: @step-warning-color;
  }
-  .lay-step-item-content--primary{
+  .lay-step-item-content--primary {
    color: @step-primary-color;
  }

-  .lay-step-item-content-wait{
+  .lay-step-item-content-wait {
    color: #000000;
  }
-  .lay-step-item-content-success{
+  .lay-step-item-content-success {
    color: @step-color;
  }
-  .lay-step-item-content-fail{
+  .lay-step-item-content-fail {
    color: @step-fail-color;
  }
-  .lay-step-item-content-warning{
+  .lay-step-item-content-warning {
    color: @step-warning-color;
  }
-  .lay-step-item-content-primary{
+  .lay-step-item-content-primary {
    color: @step-primary-color;
  }

-
-  .lay-step-item-line{
+  .lay-step-item-line {
    position: relative;
  }

@ -163,7 +162,7 @@
    display: block;
    height: 1px;
    width: 100%;
-    background: #C9C5C5;
+    background: #c9c5c5;
  }
  .is-line-center:before {
    left: 50%;
@ -189,7 +188,7 @@
    background: @step-primary-color !important;
  }

-  .lay-step-simple{
+  .lay-step-simple {
    height: 30px;
    padding: 0 8px;
    line-height: 30px;
@ -197,10 +196,10 @@
    background-color: #cecece;
    cursor: pointer;
  }
-  .lay-step-item-simple{
+  .lay-step-item-simple {
    padding: 0 18px;
  }
-  .lay-step-item-simple:after{
+  .lay-step-item-simple:after {
    content: "";
    position: absolute;
    top: 0;
@ -215,7 +214,7 @@
    height: auto;
    width: auto;
  }
-  .lay-step-item-simple:before{
+  .lay-step-item-simple:before {
    content: "";
    position: absolute;
    top: 0;
@ -230,7 +229,7 @@
    height: auto;
    width: auto;
  }
-  .lay-step-item-simple-border:before{
+  .lay-step-item-simple-border:before {
    left: 1px;
    border-color: transparent transparent transparent #ffffff;
  }
@ -250,27 +249,29 @@
  .lay-step-item-simple-primary {
    background-color: @step-primary-color;
  }
-  .lay-step-item-simple-active-border:after{
+  .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-success-border:after {
+    border-color: transparent transparent transparent
+      @step-success-color!important;
  }
-  .lay-step-item-simple-fail-border:after{
+  .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-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-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{
+  .lay-step-item-line {
    position: relative;
    height: 100%;
    width: 24px;
@ -285,12 +286,12 @@
    display: block;
    width: 1px;
    height: 100%;
-    background: #C9C5C5;
+    background: #c9c5c5;
  }
-  .lay-step-item-content{
+  .lay-step-item-content {
    margin-left: 8px;
  }
-  .is-vertical{
+  .is-vertical {
    display: flex;
  }
 }
--- a/src/component/step/index.vue
+++ b/src/component/step/index.vue
@ -1,16 +1,11 @@
 <script lang="ts">
 export default {
-  name: "LayStep"
-}
+  name: "LayStep",
+};
 </script>

 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  provide,
-  withDefaults,
-} from "vue";
+import { ref, watch, provide, withDefaults } from "vue";
 import "./index.less";

 export interface LayStepProps {
--- a/src/component/stepItem/index.vue
+++ b/src/component/stepItem/index.vue
@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayStepItem"
-}
+  name: "LayStepItem",
+};
 </script>

 <script setup lang="ts">
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@ -5,7 +5,15 @@ export default {
 </script>

 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, Ref, useSlots, watch } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  ref,
+  Ref,
+  useSlots,
+  watch,
+} from "vue";

 export interface LaySubMenuProps {
  id: string;
@ -36,23 +44,26 @@ const isOpen = computed(() => {
 const layuiNavChild = ref<HTMLElement>();
 const position = ref<String>();
 watch(isOpen, () => {
-  if (isOpen.value && position.value !== 'left-nav') {
+  if (isOpen.value && position.value !== "left-nav") {
    setTimeout(setPosition, 0);
  }
 });
-const setPosition = function() {
+const setPosition = function () {
  if (!isTree || !layuiNavChild.value) {
    return;
  }
  const offsetWidth = layuiNavChild.value.offsetWidth;
-  if (window.innerWidth < layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10) {
-    position.value = 'left-nav';
+  if (
+    window.innerWidth <
+    layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10
+  ) {
+    position.value = "left-nav";
  } else {
-    position.value = '';
+    position.value = "";
  }
-}
-window.addEventListener('resize', setPosition);
-onBeforeUnmount(()=>window.removeEventListener('resize', setPosition));
+};
+window.addEventListener("resize", setPosition);
+onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 </script>

 <template>
--- a/src/component/switch/interface.ts
+++ b/src/component/switch/interface.ts
@ -1 +0,0 @@
-
--- a/src/component/tab/interface.ts
+++ b/src/component/tab/interface.ts
@ -1 +0,0 @@
-
--- a/src/component/tabItem/index.vue
+++ b/src/component/tabItem/index.vue
@ -13,12 +13,9 @@ export interface LayTabItemProps {
  closable?: boolean | string;
 }

-const props = withDefaults(
-  defineProps<LayTabItemProps>(),
-  {
+const props = withDefaults(defineProps<LayTabItemProps>(), {
  closable: true,
-  }
-);
+});

 const active = inject("active");
 const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@ -5,13 +5,7 @@ export default {
 </script>

 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  useSlots,
-  withDefaults,
-  onMounted,
-} from "vue";
+import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
 import { Recordable } from "../../types";
 import { guid } from "../../utils/guidUtil";
 import LayCheckbox from "../checkbox";
@ -34,14 +28,12 @@ export interface LayTableProps {
  selectedKeys?: Recordable[];
 }

-const props = withDefaults(defineProps<LayTableProps>(),
-  {
+const props = withDefaults(defineProps<LayTableProps>(), {
  id: "id",
  size: "md",
  dataSource: () => [],
  selectedKeys: () => [],
-  }
-);
+});

 const emit = defineEmits([
  "change",
@ -114,11 +106,10 @@ let tableHeader = ref<HTMLElement | null>(null);
 let tableBody = ref<HTMLElement | null>(null);

 onMounted(() => {
-  tableBody.value?.addEventListener('scroll', () => {
+  tableBody.value?.addEventListener("scroll", () => {
    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
-  })
-})
-
+  });
+});
 </script>

 <template>
--- a/src/component/tooltip/index.vue
+++ b/src/component/tooltip/index.vue
@ -9,7 +9,7 @@ import { defineComponent, ref } from "vue";
 export default defineComponent({
  name: "LayTooltip",
  components: {
-    LayPopper
+    LayPopper,
  },
  props: {
    content: {
@ -33,19 +33,19 @@ export default defineComponent({
      default: true,
    },
  },
-  setup(){
+  setup() {
    const isMounted = ref(false);
    return {
-      isMounted
-    }
+      isMounted,
+    };
  },
  computed: {
-    innerProps(){
-      return {el: this.$el.nextElementSibling, ...this.$props};
-    }
+    innerProps() {
+      return { el: this.$el.nextElementSibling, ...this.$props };
+    },
  },
  mounted() {
-    this.$nextTick(() => this.isMounted = true);
-  }
+    this.$nextTick(() => (this.isMounted = true));
+  },
 });
 </script>
--- a/src/component/transfer/interface.ts
+++ b/src/component/transfer/interface.ts
@ -1,2 +1 @@
 import { Recordable } from "../../types";
-
--- a/src/component/tree/index.less
+++ b/src/component/tree/index.less
@ -1,4 +1,3 @@
-
 .layui-tree {
  line-height: 22px;
 }
@ -133,9 +132,9 @@
 }

 .layui-tree-spread
-> .layui-tree-entry
-> .layui-tree-iconClick
-> .layui-tree-iconArrow:after {
+  > .layui-tree-entry
+  > .layui-tree-iconClick
+  > .layui-tree-iconArrow:after {
  transform: rotate(90deg) translate(3px, 4px);
 }

--- a/src/index.ts
+++ b/src/index.ts
@ -74,9 +74,9 @@ import LayStepItem from "./component/stepItem/index";
 import LaySubMenu from "./component/subMenu/index";
 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"
+import LayException from "./component/exception/index";
+import LayResult from "./component/result/index";
+import LayConfigProvider from "./provider";

 const components: Record<string, Component> = {
  LaySplitPanel,
@ -149,7 +149,7 @@ const components: Record<string, Component> = {
  LaySubMenu,
  LayException,
  LayResult,
-  LayConfigProvider
+  LayConfigProvider,
 };

 const install = (app: App): void => {
@ -231,7 +231,7 @@ export {
  LaySubMenu,
  LayException,
  LayResult,
-  LayConfigProvider
+  LayConfigProvider,
 };

 export { layer, useLayer };
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@ -1,13 +1,13 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n } from "vue-i18n";
 import zh_CN from "./zh_CN";
-import en_US from './en_US';
+import en_US from "./en_US";

 const i18n = createI18n({
-  locale: 'en_US',
+  locale: "en_US",
  messages: {
    zh_CN: zh_CN,
    en_US: en_US,
  },
-})
+});

 export default i18n;
--- a/src/provider/index.vue
+++ b/src/provider/index.vue
@ -63,7 +63,8 @@ watch(
    locals?.forEach((item: any) => {
      changeLocales(item.name, item.locale, item.merge);
    });
-  }, { immediate: true, deep: true}
+  },
+  { immediate: true, deep: true }
 );

 watch(
--- a/src/theme/variable.less
+++ b/src/theme/variable.less
@ -17,7 +17,6 @@
@global-back-color: var(--global-back-color);

 :root {
-
  --global-primary-color: #009688;

  --global-normal-color: #1e9fff;
@ -35,15 +34,12 @@
  --global-fore-color: #333;

  --global-back-color: #ffffff;
-
 }

-body[lay-theme='dark'] {
-
+body[lay-theme="dark"] {
  --global-border-color: #d2d2d2;

  --global-fore-color: #ffffff;

  --global-back-color: #393d49;
-  
 }
--- a/src/types/select.ts
+++ b/src/types/select.ts
@ -12,5 +12,5 @@ export interface SelectItemHandle {
 }

 export interface SelectItemPush {
-  (selectItem: SelectItem): void
+  (selectItem: SelectItem): void;
 }
--- a/src/utils/domUtil.ts
+++ b/src/utils/domUtil.ts
@ -3,7 +3,7 @@
 * <p>
 * @param elem dom
 * */
-export function getTop(elem: any) : any {
+export function getTop(elem: any): any {
  return (
    elem.offsetTop + ((elem.offsetParent && getTop(elem.offsetParent)) || 0)
  );
@ -14,7 +14,7 @@ export function getTop(elem: any) : any {
 * <p>
 * @param elem dom
 * */
-export function getLeft(elem: any) : any {
+export function getLeft(elem: any): any {
  return (
    elem.offsetLeft + ((elem.offsetParent && getLeft(elem.offsetParent)) || 0)
  );
--- a/src/utils/guidUtil.ts
+++ b/src/utils/guidUtil.ts
@ -13,5 +13,18 @@ export function S4() {
 * @param null 无参
 * */
 export function guid() {
-  return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+  return (
+    S4() +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    S4() +
+    S4()
+  );
 }