[合并]

2022-01-08 11:27:25 +08:00
parent 38e1e38d81 0e4d5d65e5
commit d5c10257fe
27 changed files with 1995 additions and 547 deletions
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -11,15 +11,15 @@
    <lay-menu-item title="首页" id="1"></lay-menu-item>
    <lay-menu-item title="用户" id="2"></lay-menu-item>
    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-menu-item title="目录" id="7">
+    <lay-sub-menu title="目录" id="7">
        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
-        <lay-menu-item title="菜单三" id="10">
+        <lay-sub-menu title="菜单三" id="10">
            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
-        </lay-menu-item>
-    </lay-menu-item> 
+        </lay-sub-menu>
+    </lay-sub-menu> 
  </lay-menu>
 </template>

@@ -48,20 +48,68 @@ export default {

 <template>
  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
-    <lay-menu-item title="首页" id="1">
-      <template v-slot:title> 
-        <router-link to="">无感</router-link>
-      </template>
-    </lay-menu-item>
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
    <lay-menu-item title="用户" id="2"></lay-menu-item>
    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-menu-item title="目录" id="7">
+    <lay-sub-menu title="目录" id="7">
        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
-        <lay-menu-item title="菜单三" id="10">
+        <lay-sub-menu title="菜单三" id="10">
            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        </lay-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const isTree = ref(true)
+    const selectedKey = ref("5")
+    const openKeys = ref(["7"])
+
+    return {
+      isTree,
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 菜单插槽
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
+    <lay-menu-item id="1">
+      <template v-slot:title> 
+        <router-link to="">首页</router-link>
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="7">
+        <template v-slot:title> 
+          <router-link to="">目录</router-link>
+        </template>
+        <lay-menu-item id="8">
+          <template v-slot:title> 
+            <router-link to="">菜单一</router-link>
+          </template>
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+          <template v-slot:title> 
+            <router-link to="">菜单二</router-link>
+          </template>
        </lay-menu-item>
    </lay-menu-item> 
  </lay-menu>
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -319,7 +319,7 @@ export default {
 ::: table

 | 备注            | 描述          | 默认值                     |
-| --------------- | ------------- | -------------------------- |
+| --------------- | ------------- | --------------------------|
 | title           | 标题          | --                         |
 | move            | 允许拖拽      | `false`                    |
 | maxmin          | 最小化 最大化 | `false`                    |
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -1,6 +1,3 @@
-::: anchor
-:::
-
 ::: title 横向
 :::

@@ -56,7 +53,7 @@ export default {
 ::: demo

 <template>
-  <lay-slider v-model="value3" :range="true"></lay-slider>
+  <lay-slider v-model:standardrange="value3" :range="true"></lay-slider>
 </template>

 <script>
@@ -78,14 +75,14 @@ export default {
 ::: demo

 <template>
-  <lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
+  <lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
 </template>

 <script>
 import { ref } from 'vue'
 export default {
  setup() {
-    const value4 = ref([20,50])
+    const value4 = ref([23,56])
    return {
      value4
    }
@@ -94,5 +91,20 @@ export default {
 </script>
 :::

+::: title slider 属性
+:::
+
+::: table
+
+| 属性          |         描述          |             类型          |     可选值      |   默认值 |
+| ------------ | --------------------- | ------------------------- | -------------- | -------- |
+| v-model      | 选中值                | `number`  |        -       |    -    |
+| vertical  |  是否垂直     | `Boolean`                   |        -       |    -    |
+| range  |  是否区间     | `Boolean`                   |        -       |    -    |
+| verticalrange  |  垂直区间值     | `Array`                   |        -       |    -    |
+| standardrange  |  水平区间值     | `Array`                   |        -       |    -    |
+
+:::
+
 ::: comment
 :::
--- a/example/docs/zh-CN/components/step.md
+++ b/example/docs/zh-CN/components/step.md
@@ -0,0 +1,473 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+    </lay-step>
+    <div style="margin-top: 10px">
+        <lay-button size="xs" @click="previous">上一步</lay-button>
+        <lay-button size="xs" @click="nexts">下一步</lay-button>
+    </div>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title composition 为row 的排版
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" composition="row">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+        <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 带标题带描述
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+        <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 设置当前选中状态
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" current-status="primary">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+<lay-button size="xs" @click="next">下一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 设置第几步状态
+:::
+
+这里设置`status` 会覆盖掉`current-status`
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" current-status="warning">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+        <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+<lay-button size="xs" @click="nexts">下一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义宽度
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" space="200px">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+<lay-button size="xs" @click="next">下一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义图标
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
+        <lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
+        <lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+<lay-button size="xs" @click="next">下一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 居中
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" center>
+        <lay-step-item title="First" content="First step">
+            <template #pace>
+                <lay-icon type="layui-icon-ok"></lay-icon>
+            </template>
+        </lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+<lay-button size="xs" @click="next">下一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 垂直
+:::
+
+
+::: demo
+
+<template>
+<div style="height: 300px">
+    <lay-step :active="active" direction="vertical">
+        <lay-step-item title="First" content="First step">
+            <template #pace>
+                <lay-icon type="layui-icon-ok"></lay-icon>
+            </template>
+        </lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 简洁版
+:::
+
+简洁版不支持`垂直``横向``描述``排版`
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" simple @onChange="onChange">
+        <lay-step-item title="First"></lay-step-item>
+        <lay-step-item title="Second"></lay-step-item>
+        <lay-step-item title="Third"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(0);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+
+    const onChange = (index) => {
+        active.value = index
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title step步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| active | 第几步 | number |-| 0 |
+| center | 居中布局 | boolean | `true` `false` | `false`  |
+| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
+| space | 宽度 | string | -    | `auto` |
+| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `success` |
+| composition | 排版 | string | `default` `row` | `default` |
+| simple | 简洁版 | boolean | `true` `false` |`false`|
+| onChange | 点击切换时监听 | function | - |function(index){}|
+
+:::
+
+
+::: title stepItem步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| title| 标题 | string    | - | - |
+| content | 内容描述 | string  | - | -|
+| icon | 图标 | string  | - | -|
+| status | 状态 | string  | `primary` `success` `fail` `warning` | `primary`|
+
+
+:::
+
+::: title stepItem步骤条slot
+:::
+
+::: table
+
+| 属性  | 描述 | 
+| ----- | ---- | 
+| pace | 圆圈内容自定义 | 
+| default | 内容区域自定义 |
+
+:::
+
+::: comment
+:::
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -75,7 +75,40 @@ export default {

 :::

-::: title timeline-item attributes
+
+::: title 节点插槽
+:::
+
+::: demo
+
+<template>
+    <lay-timeline>
+        <lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2015年，layui 孵化" simple>
+            <template #dot>
+                <lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
+            </template>
+        </lay-timeline-item>
+    </lay-timeline>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Timeline Item 属性
 :::

 ::: table
@@ -87,5 +120,16 @@ export default {

 :::

+::: title Timeline Item 属性
+:::
+
+::: table
+
+|        |          |     |
+| ------ | -------- | --- |
+| dot | 节点 | --  |
+
+:::
+
 ::: comment
 :::
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,6 +11,19 @@
 <template>
 <lay-timeline>
  <lay-timeline-item title="0.3.x">
+    <ul> 
+      <a name="0-3-3"> </a> 
+      <li> 
+        <h3>0.3.3 <span class="layui-badge-rim">2022-01-05</span></h3> 
+        <ul> 
+          <li>[新增] setup 步骤条组件。</li>
+          <li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</li>
+          <li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
+          <li>[新增] sub-menu 目录组件, 与 menu-item 组合使用。</li>
+          <li>[修复] menu 组件 layui-nav-more 切换动画。</li>
+        </ul> 
+      </li>
+    </ul>
    <ul> 
      <a name="0-3-2"> </a> 
      <li> 
--- a/example/docs/zh-CN/guide/introduce.md
+++ b/example/docs/zh-CN/guide/introduce.md
@@ -3,7 +3,7 @@

 <p>
  <a href="http://layui-vue.pearadmin.com">
-    <img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="500">
+    <img src="../../../src/assets/logo-new.png" alt="layui" width="500">
  </a>
 </p>

--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -3,13 +3,13 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            就眠仪式
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：layui-vue
        </lay-col>
        <lay-col md="4">
@@ -22,13 +22,13 @@
 </lay-card>
 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            落小梅
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：tree table
        </lay-col>
        <lay-col md="4">
@@ -42,13 +42,13 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            halo
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：slider
        </lay-col>
        <lay-col md="4">
@@ -62,13 +62,13 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            须弥
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：layui-vue
        </lay-col>
        <lay-col md="4">
@@ -82,13 +82,13 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            Sight
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：count-up backtop
        </lay-col>
        <lay-col md="4">
@@ -102,13 +102,13 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            finalsummer
        </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
            焦点：layer-vue
        </lay-col>
        <lay-col md="4">
@@ -122,20 +122,20 @@

 <lay-card>
    <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
            <lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
        </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
            莫名点
        </lay-col>
-        <lay-col md="10">
-            焦点：skeleton
+        <lay-col md="8">
+            焦点：skeleton step
        </lay-col>
        <lay-col md="4">
-            地点：中国 未知
+            地点：中国 上海
        </lay-col>
        <lay-col md="6">
-            其他：Gitee Github
+            其他：<a href="https://gitee.com/dingyongya">Gitee</a> <a href="https://github.com/dyywork">Github</a>
        </lay-col>
    </lay-row>
 </lay-card>
--- a/example/src/assets/logo-new.png
+++ b/example/src/assets/logo-new.png
--- a/example/src/entry-server.ts
+++ b/example/src/entry-server.ts
@@ -1,52 +1,52 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { createApp } from './main'
-import { renderToString } from '@vue/server-renderer'
+import { createApp } from "./main";
+import { renderToString } from "@vue/server-renderer";

 export async function render(url, manifest): Promise<string[]> {
-  const { app, router } = createApp()
+  const { app, router } = createApp();

  // set the router to the desired URL before rendering
-  router.push(url)
-  await router.isReady()
+  router.push(url);
+  await router.isReady();

  // passing SSR context object which will be available via useSSRContext()
-  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // @vitejs/plugin-vue injects code into a component's step() that registers
  // itself on ctx.modules. After the render, ctx.modules would contain all the
  // components that have been instantiated during this render call.
-  const ctx = {}
-  const html = await renderToString(app, ctx)
+  const ctx = {};
+  const html = await renderToString(app, ctx);

  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
  // which we can then use to determine what files need to be preloaded for this
  // request.
-  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, preloadLinks]
+  const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
+  return [html, preloadLinks];
 }

 function renderPreloadLinks(modules, manifest) {
-  let links = ''
-  const seen = new Set()
+  let links = "";
+  const seen = new Set();
  modules.forEach((id) => {
-    const files = manifest[id]
+    const files = manifest[id];
    if (files) {
      files.forEach((file) => {
        if (!seen.has(file)) {
-          seen.add(file)
-          links += renderPreloadLink(file)
+          seen.add(file);
+          links += renderPreloadLink(file);
        }
-      })
+      });
    }
-  })
-  return links
+  });
+  return links;
 }

 function renderPreloadLink(file) {
-  if (file.endsWith('.js')) {
-    return `<link rel="modulepreload" crossorigin href="${file}">`
-  } else if (file.endsWith('.css')) {
-    return `<link rel="stylesheet" href="${file}">`
+  if (file.endsWith(".js")) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`;
+  } else if (file.endsWith(".css")) {
+    return `<link rel="stylesheet" href="${file}">`;
  } else {
-    return ''
+    return "";
  }
 }
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -1,362 +1,373 @@
-import BaseLayout from '../layouts/Layout.vue'
-import Component from '../view/component.vue'
-import Hooks from '../view/hooks.vue'
-import Guide from '../view/guide.vue'
-import Index from '../view/index.vue'
-import Ecology from '../view/ecology.vue'
+import BaseLayout from "../layouts/Layout.vue";
+import Component from "../view/component.vue";
+import Hooks from "../view/hooks.vue";
+import Guide from "../view/guide.vue";
+import Index from "../view/index.vue";
+import Ecology from "../view/ecology.vue";

 const zhCN = [
  {
-    path: '/',
-    redirect: '/zh-CN/index',
+    path: "/",
+    redirect: "/zh-CN/index",
    component: BaseLayout,
-    meta: { title: '首页' },
+    meta: { title: "首页" },
    children: [
      {
-        path: '/zh-CN/index',
+        path: "/zh-CN/index",
        component: Index,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
      },
      {
-        path: '/zh-CN/ecology',
+        path: "/zh-CN/ecology",
        component: Ecology,
-        meta: { title: '生态' },
+        meta: { title: "生态" },
      },
      {
-        path: '/zh-CN/guide',
-        redirect: '/zh-CN/guide/introduce',
+        path: "/zh-CN/guide",
+        redirect: "/zh-CN/guide/introduce",
        component: Guide,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
        children: [
          {
-            path: '/zh-CN/guide/introduce',
-            component: () => import('../../docs/zh-CN/guide/introduce.md'),
-            meta: { title: '介绍' },
+            path: "/zh-CN/guide/introduce",
+            component: () => import("../../docs/zh-CN/guide/introduce.md"),
+            meta: { title: "介绍" },
          },
          {
-            path: '/zh-CN/guide/getStarted',
-            component: () => import('../../docs/zh-CN/guide/getStarted.md'),
-            meta: { title: '安装' },
+            path: "/zh-CN/guide/getStarted",
+            component: () => import("../../docs/zh-CN/guide/getStarted.md"),
+            meta: { title: "安装" },
          },
          {
-            path: '/zh-CN/guide/changelog',
-            component: () => import('../../docs/zh-CN/guide/changelog.md'),
-            meta: { title: '更新' },
+            path: "/zh-CN/guide/changelog",
+            component: () => import("../../docs/zh-CN/guide/changelog.md"),
+            meta: { title: "更新" },
          },
          {
-            path: '/zh-CN/guide/problem',
-            component: () => import('../../docs/zh-CN/guide/problem.md'),
-            meta: { title: '问题' },
+            path: "/zh-CN/guide/problem",
+            component: () => import("../../docs/zh-CN/guide/problem.md"),
+            meta: { title: "问题" },
          },
          {
-            path: '/zh-CN/guide/member',
-            component: () => import('../../docs/zh-CN/guide/member.md'),
-            meta: { title: '团队' },
+            path: "/zh-CN/guide/member",
+            component: () => import("../../docs/zh-CN/guide/member.md"),
+            meta: { title: "团队" },
          },
          {
-            path: '/zh-CN/guide/norms',
-            component: () => import('../../docs/zh-CN/guide/norms.md'),
-            meta: { title: '规范' },
+            path: "/zh-CN/guide/norms",
+            component: () => import("../../docs/zh-CN/guide/norms.md"),
+            meta: { title: "规范" },
          },
          {
-            path: '/zh-CN/guide/theme',
-            component: () => import('../../docs/zh-CN/guide/theme.md'),
-            meta: { title: '主题' },
+            path: "/zh-CN/guide/theme",
+            component: () => import("../../docs/zh-CN/guide/theme.md"),
+            meta: { title: "主题" },
          },
          {
-            path: '/zh-CN/guide/sponsor',
-            component: () => import('../../docs/zh-CN/guide/sponsor.md'),
-            meta: { title: '赞助' },
+            path: "/zh-CN/guide/sponsor",
+            component: () => import("../../docs/zh-CN/guide/sponsor.md"),
+            meta: { title: "赞助" },
          },
        ],
      },
      {
-        path: '/zh-CN/components',
-        redirect: '/zh-CN/components/color',
+        path: "/zh-CN/components",
+        redirect: "/zh-CN/components/color",
        component: Component,
-        meta: { title: '组件' },
+        meta: { title: "组件" },
        children: [
          {
-            path: '/zh-CN/components/skeleton',
-            component: () => import('../../docs/zh-CN/components/skeleton.md'),
-            meta: { title: '骨架屏' },
+            path: "/zh-CN/components/skeleton",
+            component: () => import("../../docs/zh-CN/components/skeleton.md"),
+            meta: { title: "骨架屏" },
          },
          {
-            path: '/zh-CN/components/layout',
-            component: () => import('../../docs/zh-CN/components/layout.md'),
-            meta: { title: '布局' },
+            path: "/zh-CN/components/layout",
+            component: () => import("../../docs/zh-CN/components/layout.md"),
+            meta: { title: "布局" },
          },
          {
-            path: '/zh-CN/components/color',
-            component: () => import('../../docs/zh-CN/components/color.md'),
-            meta: { title: '颜色' },
+            path: "/zh-CN/components/color",
+            component: () => import("../../docs/zh-CN/components/color.md"),
+            meta: { title: "颜色" },
          },
          {
-            path: '/zh-CN/components/container',
-            component: () => import('../../docs/zh-CN/components/container.md'),
-            meta: { title: '容器' },
+            path: "/zh-CN/components/container",
+            component: () => import("../../docs/zh-CN/components/container.md"),
+            meta: { title: "容器" },
          },
          {
-            path: '/zh-CN/components/breadcrumb',
+            path: "/zh-CN/components/breadcrumb",
            component: () =>
-              import('../../docs/zh-CN/components/breadcrumb.md'),
-            meta: { title: '面包屑' },
+              import("../../docs/zh-CN/components/breadcrumb.md"),
+            meta: { title: "面包屑" },
          },
          {
-            path: '/zh-CN/components/button',
-            component: () => import('../../docs/zh-CN/components/button.md'),
-            meta: { title: '按钮' },
+            path: "/zh-CN/components/button",
+            component: () => import("../../docs/zh-CN/components/button.md"),
+            meta: { title: "按钮" },
          },
          {
-            path: '/zh-CN/components/icon',
-            component: () => import('../../docs/zh-CN/components/icon.md'),
-            meta: { title: '图标' },
+            path: "/zh-CN/components/icon",
+            component: () => import("../../docs/zh-CN/components/icon.md"),
+            meta: { title: "图标" },
          },
          {
-            path: '/zh-CN/components/panel',
-            component: () => import('../../docs/zh-CN/components/panel.md'),
-            meta: { title: '面板' },
+            path: "/zh-CN/components/panel",
+            component: () => import("../../docs/zh-CN/components/panel.md"),
+            meta: { title: "面板" },
          },
          {
-            path: '/zh-CN/components/animation',
-            component: () => import('../../docs/zh-CN/components/animation.md'),
-            meta: { title: '动画' },
+            path: "/zh-CN/components/animation",
+            component: () => import("../../docs/zh-CN/components/animation.md"),
+            meta: { title: "动画" },
          },
          {
-            path: '/zh-CN/components/card',
-            component: () => import('../../docs/zh-CN/components/card.md'),
-            meta: { title: '卡片' },
+            path: "/zh-CN/components/card",
+            component: () => import("../../docs/zh-CN/components/card.md"),
+            meta: { title: "卡片" },
          },
          {
-            path: '/zh-CN/components/grid',
-            component: () => import('../../docs/zh-CN/components/grid.md'),
-            meta: { title: '栅格' },
+            path: "/zh-CN/components/grid",
+            component: () => import("../../docs/zh-CN/components/grid.md"),
+            meta: { title: "栅格" },
          },
          {
-            path: '/zh-CN/components/form',
-            component: () => import('../../docs/zh-CN/components/form.md'),
-            meta: { title: '表单' },
+            path: "/zh-CN/components/form",
+            component: () => import("../../docs/zh-CN/components/form.md"),
+            meta: { title: "表单" },
          },
          {
-            path: '/zh-CN/components/badge',
-            component: () => import('../../docs/zh-CN/components/badge.md'),
-            meta: { title: '徽章' },
+            path: "/zh-CN/components/badge",
+            component: () => import("../../docs/zh-CN/components/badge.md"),
+            meta: { title: "徽章" },
          },
          {
-            path: '/zh-CN/components/block',
-            component: () => import('../../docs/zh-CN/components/block.md'),
-            meta: { title: '辅助' },
+            path: "/zh-CN/components/block",
+            component: () => import("../../docs/zh-CN/components/block.md"),
+            meta: { title: "辅助" },
          },
          {
-            path: '/zh-CN/components/line',
-            component: () => import('../../docs/zh-CN/components/line.md'),
-            meta: { title: '分割' },
+            path: "/zh-CN/components/line",
+            component: () => import("../../docs/zh-CN/components/line.md"),
+            meta: { title: "分割" },
          },
          {
-            path: '/zh-CN/components/progress',
-            component: () => import('../../docs/zh-CN/components/progress.md'),
-            meta: { title: '进度' },
+            path: "/zh-CN/components/progress",
+            component: () => import("../../docs/zh-CN/components/progress.md"),
+            meta: { title: "进度" },
          },
          {
-            path: '/zh-CN/components/menu',
-            component: () => import('../../docs/zh-CN/components/menu.md'),
-            meta: { title: '菜单' },
+            path: "/zh-CN/components/menu",
+            component: () => import("../../docs/zh-CN/components/menu.md"),
+            meta: { title: "菜单" },
          },
          {
-            path: '/zh-CN/components/timeline',
-            component: () => import('../../docs/zh-CN/components/timeline.md'),
-            meta: { title: '时间线' },
+            path: "/zh-CN/components/timeline",
+            component: () => import("../../docs/zh-CN/components/timeline.md"),
+            meta: { title: "时间线" },
          },
          {
-            path: '/zh-CN/components/collapse',
-            component: () => import('../../docs/zh-CN/components/collapse.md'),
-            meta: { title: '折叠面板' },
+            path: "/zh-CN/components/collapse",
+            component: () => import("../../docs/zh-CN/components/collapse.md"),
+            meta: { title: "折叠面板" },
          },
          {
-            path: '/zh-CN/components/table',
-            component: () => import('../../docs/zh-CN/components/table.md'),
-            meta: { title: '表格' },
+            path: "/zh-CN/components/step",
+            component: () => import("../../docs/zh-CN/components/step.md"),
+            meta: { title: "分步" },
          },
          {
-            path: '/zh-CN/components/avatar',
-            component: () => import('../../docs/zh-CN/components/avatar.md'),
-            meta: { title: '头像' },
+            path: "/zh-CN/components/table",
+            component: () => import("../../docs/zh-CN/components/table.md"),
+            meta: { title: "表格" },
          },
          {
-            path: '/zh-CN/components/field',
-            component: () => import('../../docs/zh-CN/components/field.md'),
-            meta: { title: '字段' },
+            path: "/zh-CN/components/avatar",
+            component: () => import("../../docs/zh-CN/components/avatar.md"),
+            meta: { title: "头像" },
          },
          {
-            path: '/zh-CN/components/empty',
-            component: () => import('../../docs/zh-CN/components/empty.md'),
-            meta: { title: '空' },
+            path: "/zh-CN/components/field",
+            component: () => import("../../docs/zh-CN/components/field.md"),
+            meta: { title: "字段" },
          },
          {
-            path: '/zh-CN/components/rate',
-            component: () => import('../../docs/zh-CN/components/rate.md'),
-            meta: { title: '评分' },
+            path: "/zh-CN/components/empty",
+            component: () => import("../../docs/zh-CN/components/empty.md"),
+            meta: { title: "空" },
          },
          {
-            path: '/zh-CN/components/dropdown',
-            component: () => import('../../docs/zh-CN/components/dropdown.md'),
-            meta: { title: '下拉' },
+            path: "/zh-CN/components/rate",
+            component: () => import("../../docs/zh-CN/components/rate.md"),
+            meta: { title: "评分" },
          },
          {
-            path: '/zh-CN/components/tab',
-            component: () => import('../../docs/zh-CN/components/tab.md'),
-            meta: { title: '选项卡' },
+            path: "/zh-CN/components/dropdown",
+            component: () => import("../../docs/zh-CN/components/dropdown.md"),
+            meta: { title: "下拉" },
          },
          {
-            path: '/zh-CN/components/iconPicker',
+            path: "/zh-CN/components/tab",
+            component: () => import("../../docs/zh-CN/components/tab.md"),
+            meta: { title: "选项卡" },
+          },
+          {
+            path: "/zh-CN/components/iconPicker",
            component: () =>
-              import('../../docs/zh-CN/components/iconPicker.md'),
-            meta: { title: '图标选择' },
+              import("../../docs/zh-CN/components/iconPicker.md"),
+            meta: { title: "图标选择" },
          },
          {
-            path: '/zh-CN/components/tree',
-            component: () => import('../../docs/zh-CN/components/tree.md'),
-            meta: { title: '树形组件' },
+            path: "/zh-CN/components/tree",
+            component: () => import("../../docs/zh-CN/components/tree.md"),
+            meta: { title: "树形组件" },
          },
          {
-            path: '/zh-CN/components/page',
-            component: () => import('../../docs/zh-CN/components/page.md'),
-            meta: { title: '分页' },
+            path: "/zh-CN/components/page",
+            component: () => import("../../docs/zh-CN/components/page.md"),
+            meta: { title: "分页" },
          },
          {
-            path: '/zh-CN/components/transfer',
-            component: () => import('../../docs/zh-CN/components/transfer.md'),
-            meta: { title: '穿梭框' },
+            path: "/zh-CN/components/transfer",
+            component: () => import("../../docs/zh-CN/components/transfer.md"),
+            meta: { title: "穿梭框" },
          },
          {
-            path: '/zh-CN/components/checkbox',
-            component: () => import('../../docs/zh-CN/components/checkbox.md'),
-            meta: { title: '复选框' },
+            path: "/zh-CN/components/checkbox",
+            component: () => import("../../docs/zh-CN/components/checkbox.md"),
+            meta: { title: "复选框" },
          },
          {
-            path: '/zh-CN/components/radio',
-            component: () => import('../../docs/zh-CN/components/radio.md'),
-            meta: { title: '单选框' },
+            path: "/zh-CN/components/radio",
+            component: () => import("../../docs/zh-CN/components/radio.md"),
+            meta: { title: "单选框" },
          },
          {
-            path: '/zh-CN/components/input',
-            component: () => import('../../docs/zh-CN/components/input.md'),
-            meta: { title: '输入框' },
+            path: "/zh-CN/components/input",
+            component: () => import("../../docs/zh-CN/components/input.md"),
+            meta: { title: "输入框" },
          },
          {
-            path: '/zh-CN/components/inputNumber',
-            component: () => import('../../docs/zh-CN/components/inputNumber.md'),
-            meta: { title: '数字输入框' },
-          },
-          {
-            path: '/zh-CN/components/textarea',
-            component: () => import('../../docs/zh-CN/components/textarea.md'),
-            meta: { title: '文本域' },
-          },
-          {
-            path: '/zh-CN/components/switch',
-            component: () => import('../../docs/zh-CN/components/switch.md'),
-            meta: { title: '开关' },
-          },
-          {
-            path: '/zh-CN/components/slider',
-            component: () => import('../../docs/zh-CN/components/slider.md'),
-            meta: { title: '滑块' },
-          },
-          {
-            path: '/zh-CN/components/carousel',
-            component: () => import('../../docs/zh-CN/components/carousel.md'),
-            meta: { title: '轮播' },
-          },
-          {
-            path: '/zh-CN/components/select',
-            component: () => import('../../docs/zh-CN/components/select.md'),
-            meta: { title: '下拉选择' },
-          },
-          {
-            path: '/zh-CN/components/colorPicker',
+            path: "/zh-CN/components/inputNumber",
            component: () =>
-              import('../../docs/zh-CN/components/colorPicker.md'),
-            meta: { title: '颜色选择器' },
-          },{
-            path: '/zh-CN/components/layer',
-            component: () => import('../../docs/zh-CN/components/layer.md'),
-            meta: { title: '简介' },
+              import("../../docs/zh-CN/components/inputNumber.md"),
+            meta: { title: "数字输入框" },
          },
          {
-            path: '/zh-CN/components/tooltip',
-            component: () => import('../../docs/zh-CN/components/tooltip.md'),
-            meta: { title: '文字提示' },
+            path: "/zh-CN/components/textarea",
+            component: () => import("../../docs/zh-CN/components/textarea.md"),
+            meta: { title: "文本域" },
          },
          {
-            path: '/zh-CN/components/modal',
-            component: () => import('../../docs/zh-CN/components/modal.md'),
-            meta: { title: '弹层' },
-          },{
-            path: '/zh-CN/components/load',
-            component: () => import('../../docs/zh-CN/components/load.md'),
-            meta: { title: '加载' },
-          },{
-            path: '/zh-CN/components/confirm',
-            component: () => import('../../docs/zh-CN/components/confirm.md'),
-            meta: { title: '询问' },
-          },{
-            path: '/zh-CN/components/msg',
-            component: () => import('../../docs/zh-CN/components/msg.md'),
-            meta: { title: '信息' },
-          },{
-            path: '/zh-CN/components/backtop',
-            component: () => import('../../docs/zh-CN/components/backtop.md'),
-            meta: { title: '返回顶部' },
+            path: "/zh-CN/components/switch",
+            component: () => import("../../docs/zh-CN/components/switch.md"),
+            meta: { title: "开关" },
          },
          {
-            path: '/zh-CN/components/countup',
-            component: () => import('../../docs/zh-CN/components/countup.md'),
-            meta: { title: '数字滚动' },
+            path: "/zh-CN/components/slider",
+            component: () => import("../../docs/zh-CN/components/slider.md"),
+            meta: { title: "滑块" },
+          },
+          {
+            path: "/zh-CN/components/carousel",
+            component: () => import("../../docs/zh-CN/components/carousel.md"),
+            meta: { title: "轮播" },
+          },
+          {
+            path: "/zh-CN/components/select",
+            component: () => import("../../docs/zh-CN/components/select.md"),
+            meta: { title: "下拉选择" },
+          },
+          {
+            path: "/zh-CN/components/colorPicker",
+            component: () =>
+              import("../../docs/zh-CN/components/colorPicker.md"),
+            meta: { title: "颜色选择器" },
+          },
+          {
+            path: "/zh-CN/components/layer",
+            component: () => import("../../docs/zh-CN/components/layer.md"),
+            meta: { title: "简介" },
+          },
+          {
+            path: "/zh-CN/components/tooltip",
+            component: () => import("../../docs/zh-CN/components/tooltip.md"),
+            meta: { title: "文字提示" },
+          },
+          {
+            path: "/zh-CN/components/modal",
+            component: () => import("../../docs/zh-CN/components/modal.md"),
+            meta: { title: "弹层" },
+          },
+          {
+            path: "/zh-CN/components/load",
+            component: () => import("../../docs/zh-CN/components/load.md"),
+            meta: { title: "加载" },
+          },
+          {
+            path: "/zh-CN/components/confirm",
+            component: () => import("../../docs/zh-CN/components/confirm.md"),
+            meta: { title: "询问" },
+          },
+          {
+            path: "/zh-CN/components/msg",
+            component: () => import("../../docs/zh-CN/components/msg.md"),
+            meta: { title: "信息" },
+          },
+          {
+            path: "/zh-CN/components/backtop",
+            component: () => import("../../docs/zh-CN/components/backtop.md"),
+            meta: { title: "返回顶部" },
+          },
+          {
+            path: "/zh-CN/components/countup",
+            component: () => import("../../docs/zh-CN/components/countup.md"),
+            meta: { title: "数字滚动" },
          },
        ],
      },
      {
-        path: '/zh-CN/hooks',
-        redirect: '/zh-CN/hooks/useStarted',
+        path: "/zh-CN/hooks",
+        redirect: "/zh-CN/hooks/useStarted",
        component: Hooks,
-        meta: { title: 'hooks' },
+        meta: { title: "hooks" },
        children: [
          {
-            path: '/zh-CN/hooks/useStarted',
+            path: "/zh-CN/hooks/useStarted",
+            component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
+            meta: { title: "useStarted" },
+          },
+          {
+            path: "/zh-CN/hooks/useClickOutside",
            component: () =>
-              import('../../docs/zh-CN/hooks/useStarted.md'),
-            meta: { title: 'useStarted' },
+              import("../../docs/zh-CN/hooks/useClickOutside.md"),
+            meta: { title: "useClickOutside" },
          },
          {
-            path: '/zh-CN/hooks/useClickOutside',
-            component: () =>
-              import('../../docs/zh-CN/hooks/useClickOutside.md'),
-            meta: { title: 'useClickOutside' },
+            path: "/zh-CN/hooks/useFullScreen",
+            component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
+            meta: { title: "useFullScreen" },
          },
          {
-            path: '/zh-CN/hooks/useFullScreen',
-            component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
-            meta: { title: 'useFullScreen' },
+            path: "/zh-CN/hooks/useMove",
+            component: () => import("../../docs/zh-CN/hooks/useMove.md"),
+            meta: { title: "useMove" },
          },
          {
-            path: '/zh-CN/hooks/useMove',
-            component: () => import('../../docs/zh-CN/hooks/useMove.md'),
-            meta: { title: 'useMove' },
-          },          {
-            path: '/zh-CN/hooks/useState',
-            component: () => import('../../docs/zh-CN/hooks/useState.md'),
-            meta: { title: 'useState' },
+            path: "/zh-CN/hooks/useState",
+            component: () => import("../../docs/zh-CN/hooks/useState.md"),
+            meta: { title: "useState" },
          },
          {
-            path: '/zh-CN/hooks/useBoolean',
-            component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
-            meta: { title: 'useBoolean' },
+            path: "/zh-CN/hooks/useBoolean",
+            component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
+            meta: { title: "useBoolean" },
          },
        ],
      },
    ],
  },
-]
+];

-export default zhCN
+export default zhCN;
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -50,362 +50,371 @@
  </lay-layout>
 </template>
 <script>
-import { ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
 export default {
  setup() {
-    const route = useRoute()
-    const router = useRouter()
-    const currentPath = ref('/zh-CN/guide')
+    const route = useRoute();
+    const router = useRouter();
+    const currentPath = ref("/zh-CN/guide");

    watch(
      () => route.path,
      (val) => {
-        currentPath.value = val
+        currentPath.value = val;
      },
      {
        immediate: true,
        deep: true,
      }
-    )
+    );

    const menus = [
      {
        id: 1,
-        title: '通用',
+        title: "通用",
        children: [
          {
            id: 20,
-            title: '颜色',
-            subTitle: 'color',
-            path: '/zh-CN/components/color',
+            title: "颜色",
+            subTitle: "color",
+            path: "/zh-CN/components/color",
          },
          {
            id: 6,
-            title: '按钮',
-            subTitle: 'button',
-            path: '/zh-CN/components/button',
+            title: "按钮",
+            subTitle: "button",
+            path: "/zh-CN/components/button",
          },
          {
            id: 7,
-            title: '图标',
-            subTitle: 'iconfont',
-            path: '/zh-CN/components/icon',
+            title: "图标",
+            subTitle: "iconfont",
+            path: "/zh-CN/components/icon",
          },
          {
            id: 10,
-            title: '动画',
-            subTitle: 'animation',
-            path: '/zh-CN/components/animation',
+            title: "动画",
+            subTitle: "animation",
+            path: "/zh-CN/components/animation",
          },
        ],
      },
      {
        id: 1,
-        title: '布局',
+        title: "布局",
        children: [
-          {
-            id: 111,
-            title: '骨架屏',
-            subTitle: 'skeleton',
-            path: '/zh-CN/components/skeleton',
-          },
          {
            id: 4,
-            title: '布局',
-            subTitle: 'layout',
-            path: '/zh-CN/components/layout',
+            title: "布局",
+            subTitle: "layout",
+            path: "/zh-CN/components/layout",
          },
          {
            id: 5,
-            title: '容器',
-            subTitle: 'container',
-            path: '/zh-CN/components/container',
+            title: "容器",
+            subTitle: "container",
+            path: "/zh-CN/components/container",
          },
          {
            id: 11,
-            title: '栅格',
-            subTitle: 'grid',
-            path: '/zh-CN/components/grid',
+            title: "栅格",
+            subTitle: "grid",
+            path: "/zh-CN/components/grid",
          },
          {
            id: 8,
-            title: '面板',
-            subTitle: 'panel',
-            path: '/zh-CN/components/panel',
+            title: "面板",
+            subTitle: "panel",
+            path: "/zh-CN/components/panel",
          },
          {
            id: 9,
-            title: '卡片',
-            subTitle: 'card',
-            path: '/zh-CN/components/card',
+            title: "卡片",
+            subTitle: "card",
+            path: "/zh-CN/components/card",
+          },
+          {
+            id: 10,
+            title: "骨架",
+            subTitle: "skeleton",
+            path: "/zh-CN/components/skeleton",
          },
        ],
      },
      {
        id: 1,
-        title: '导航',
+        title: "导航",
        children: [
          {
            id: 16,
-            title: '菜单',
-            subTitle: 'nav',
-            path: '/zh-CN/components/menu',
+            title: "菜单",
+            subTitle: "nav",
+            path: "/zh-CN/components/menu",
          },
          {
            id: 17,
-            title: '面包屑',
-            subTitle: 'breadcrumb',
-            path: '/zh-CN/components/breadcrumb',
+            title: "面包屑",
+            subTitle: "breadcrumb",
+            path: "/zh-CN/components/breadcrumb",
          },
          {
            id: 28,
-            title: '选项卡',
-            subTitle: 'tab',
-            path: '/zh-CN/components/tab',
+            title: "选项卡",
+            subTitle: "tab",
+            path: "/zh-CN/components/tab",
          },
          {
            id: 27,
-            title: '下拉菜单',
-            subTitle: 'dropdown',
-            path: '/zh-CN/components/dropdown',
+            title: "下拉菜单",
+            subTitle: "dropdown",
+            path: "/zh-CN/components/dropdown",
          },
          {
            id: 42,
-            title: '返回顶部',
-            subTitle: 'backtop',
-            path: '/zh-CN/components/backtop',
+            title: "返回顶部",
+            subTitle: "backtop",
+            path: "/zh-CN/components/backtop",
          },
        ],
      },
      {
        id: 1,
-        title: '表单',
+        title: "表单",
        children: [
          {
            id: 36,
-            title: '开关',
-            subTitle: 'switch',
-            path: '/zh-CN/components/switch',
+            title: "开关",
+            subTitle: "switch",
+            path: "/zh-CN/components/switch",
          },
          {
            id: 32,
-            title: '复选框',
-            subTitle: 'checkbox',
-            path: '/zh-CN/components/checkbox',
+            title: "复选框",
+            subTitle: "checkbox",
+            path: "/zh-CN/components/checkbox",
          },
          {
            id: 33,
-            title: '单选框',
-            subTitle: 'radio',
-            path: '/zh-CN/components/radio',
+            title: "单选框",
+            subTitle: "radio",
+            path: "/zh-CN/components/radio",
          },
          {
            id: 34,
-            title: '输入框',
-            subTitle: 'input',
-            path: '/zh-CN/components/input',
+            title: "输入框",
+            subTitle: "input",
+            path: "/zh-CN/components/input",
          },
          {
            id: 341,
-            title: '数字输入框',
-            subTitle: 'inputNumber',
-            path: '/zh-CN/components/inputNumber',
+            title: "数字输入框",
+            subTitle: "inputNumber",
+            path: "/zh-CN/components/inputNumber",
          },
          {
            id: 35,
-            title: '文本域',
-            subTitle: 'textarea',
-            path: '/zh-CN/components/textarea',
+            title: "文本域",
+            subTitle: "textarea",
+            path: "/zh-CN/components/textarea",
          },
          {
            id: 39,
-            title: '下拉选择',
-            subTitle: 'select',
-            path: '/zh-CN/components/select',
+            title: "下拉选择",
+            subTitle: "select",
+            path: "/zh-CN/components/select",
          },
          {
            id: 40,
-            title: '颜色选择器',
-            subTitle: 'colorPicker',
-            path: '/zh-CN/components/colorPicker',
+            title: "颜色选择器",
+            subTitle: "colorPicker",
+            path: "/zh-CN/components/colorPicker",
          },
          {
            id: 29,
-            title: '图标选择器',
-            subTitle: 'iconPicker',
-            path: '/zh-CN/components/iconPicker',
+            title: "图标选择器",
+            subTitle: "iconPicker",
+            path: "/zh-CN/components/iconPicker",
          },
          {
            id: 26,
-            title: '评分',
-            subTitle: 'rate',
-            path: '/zh-CN/components/rate',
+            title: "评分",
+            subTitle: "rate",
+            path: "/zh-CN/components/rate",
          },
          {
            id: 37,
-            title: '滑块',
-            subTitle: 'slider',
-            path: '/zh-CN/components/slider',
+            title: "滑块",
+            subTitle: "slider",
+            path: "/zh-CN/components/slider",
          },
          {
            id: 12,
-            title: '表单',
-            subTitle: 'form',
-            path: '/zh-CN/components/form',
+            title: "表单",
+            subTitle: "form",
+            path: "/zh-CN/components/form",
          },
        ],
      },
      {
        id: 1,
-        title: '展示',
+        title: "展示",
        children: [
          {
            id: 18,
-            title: '进度',
-            subTitle: 'progress',
-            path: '/zh-CN/components/progress',
+            title: "进度",
+            subTitle: "progress",
+            path: "/zh-CN/components/progress",
          },
          {
            id: 19,
-            title: '时间线',
-            subTitle: 'timeline',
-            path: '/zh-CN/components/timeline',
+            title: "时间线",
+            subTitle: "timeline",
+            path: "/zh-CN/components/timeline",
          },
          {
            id: 21,
-            title: '折叠面板',
-            subTitle: 'collapse',
-            path: '/zh-CN/components/collapse',
+            title: "折叠面板",
+            subTitle: "collapse",
+            path: "/zh-CN/components/collapse",
          },
          {
            id: 22,
-            title: '表格',
-            subTitle: 'table',
-            path: '/zh-CN/components/table',
+            title: "表格",
+            subTitle: "table",
+            path: "/zh-CN/components/table",
          },
          {
            id: 23,
-            title: '头像',
-            subTitle: 'avatar',
-            path: '/zh-CN/components/avatar',
+            title: "头像",
+            subTitle: "avatar",
+            path: "/zh-CN/components/avatar",
          },
          {
            id: 25,
-            title: '空',
-            subTitle: 'empty',
-            path: '/zh-CN/components/empty',
+            title: "空",
+            subTitle: "empty",
+            path: "/zh-CN/components/empty",
          },
          {
            id: 29,
-            title: '分页',
-            subTitle: 'page',
-            path: '/zh-CN/components/page',
+            title: "分页",
+            subTitle: "page",
+            path: "/zh-CN/components/page",
          },
          {
            id: 30,
-            title: '树形组件',
-            subTitle: 'tree',
-            path: '/zh-CN/components/tree',
+            title: "树形组件",
+            subTitle: "tree",
+            path: "/zh-CN/components/tree",
          },
          {
            id: 31,
-            title: '穿梭框',
-            subTitle: 'transfer',
-            path: '/zh-CN/components/transfer',
+            title: "穿梭框",
+            subTitle: "transfer",
+            path: "/zh-CN/components/transfer",
          },
          {
            id: 38,
-            title: '轮播',
-            subTitle: 'carousel',
-            path: '/zh-CN/components/carousel',
+            title: "轮播",
+            subTitle: "carousel",
+            path: "/zh-CN/components/carousel",
          },
          {
            id: 43,
-            title: '数字滚动',
-            subTitle: 'countUp',
-            path: '/zh-CN/components/countup',
+            title: "数字滚动",
+            subTitle: "countUp",
+            path: "/zh-CN/components/countup",
          },
        ],
      },
      {
        id: 1,
-        title: '辅助',
+        title: "辅助",
        children: [
          {
            id: 13,
-            title: '徽章',
-            subTitle: 'badge',
-            path: '/zh-CN/components/badge',
+            title: "徽章",
+            subTitle: "badge",
+            path: "/zh-CN/components/badge",
          },
          {
            id: 14,
-            title: '区块',
-            subTitle: 'block',
-            path: '/zh-CN/components/block',
+            title: "区块",
+            subTitle: "block",
+            path: "/zh-CN/components/block",
          },
          {
            id: 15,
-            title: '分割',
-            subTitle: 'line',
-            path: '/zh-CN/components/line',
+            title: "分割",
+            subTitle: "line",
+            path: "/zh-CN/components/line",
          },
          {
            id: 24,
-            title: '字段',
-            subTitle: 'field',
-            path: '/zh-CN/components/field',
+            title: "字段",
+            subTitle: "field",
+            path: "/zh-CN/components/field",
          },
          {
            id: 25,
-            title: '文字提示',
-            subTitle: 'tooltip',
-            path: '/zh-CN/components/tooltip',
+            title: "文字提示",
+            subTitle: "tooltip",
+            path: "/zh-CN/components/tooltip",
+          },
+          {
+            id: 99,
+            title: "分步",
+            subTitle: "step",
+            path: "/zh-CN/components/step",
          },
        ],
      },
      {
        id: 1,
-        title: '反馈',
+        title: "反馈",
        children: [
          {
            id: 90,
-            title: '弹层',
-            subTitle: 'modal',
-            path: '/zh-CN/components/modal',
-          },{
+            title: "弹层",
+            subTitle: "modal",
+            path: "/zh-CN/components/modal",
+          },
+          {
            id: 91,
-            title: '加载',
-            subTitle: 'modal',
-            path: '/zh-CN/components/load',
-          },{
+            title: "加载",
+            subTitle: "modal",
+            path: "/zh-CN/components/load",
+          },
+          {
            id: 92,
-            title: '询问',
-            subTitle: 'confirm',
-            path: '/zh-CN/components/confirm',
-          },{
+            title: "询问",
+            subTitle: "confirm",
+            path: "/zh-CN/components/confirm",
+          },
+          {
            id: 93,
-            title: '消息',
-            subTitle: 'msg',
-            path: '/zh-CN/components/msg',
+            title: "消息",
+            subTitle: "msg",
+            path: "/zh-CN/components/msg",
          },
        ],
      },
-    ]
+    ];

-    const selected = ref(1)
+    const selected = ref(1);

    const handleClick = function (menu) {
-      selected.value = menu.id
-      router.push(menu.path)
-    }
+      selected.value = menu.id;
+      router.push(menu.path);
+    };

    return {
      menus,
      selected,
      currentPath,
      handleClick,
-    }
+    };
  },
-}
+};
 </script>