From acef2f91b05ad81330357fa98ea64d98e71381a9 Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Tue, 4 Jan 2022 18:12:13 +0800
Subject: [PATCH 1/2] =?UTF-8?q?1.=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/step.md | 384 +++++++++++++++++++++
 example/src/entry-server.ts           |  46 +--
 example/src/router/zh-CN.ts           | 469 +++++++++++++-------------
 example/src/view/component.vue        | 339 ++++++++++---------
 src/index.ts                          |  12 +-
 src/module/slider/index.vue           |   4 +-
 src/module/step/index.less            | 191 +++++++++++
 src/module/step/index.ts              |   9 +
 src/module/step/index.vue             |  43 +++
 src/module/stepItem/index.ts          |   9 +
 src/module/stepItem/index.vue         | 152 +++++++++
 11 files changed, 1236 insertions(+), 422 deletions(-)
 create mode 100644 example/docs/zh-CN/components/step.md
 create mode 100644 src/module/step/index.less
 create mode 100644 src/module/step/index.ts
 create mode 100644 src/module/step/index.vue
 create mode 100644 src/module/stepItem/index.ts
 create mode 100644 src/module/stepItem/index.vue

diff --git a/example/docs/zh-CN/components/step.md b/example/docs/zh-CN/components/step.md
new file mode 100644
index 00000000..61313e05
--- /dev/null
+++ b/example/docs/zh-CN/components/step.md
@@ -0,0 +1,384 @@
+::: 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>
+<lay-button size="xs" @click="nexts">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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">
+        <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="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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="nexts">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</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 step步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| active | 第几步 | number |-| 0 |
+| center | 居中布局 | boolean | `true` `false` | `false`  |
+| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
+| space | 宽度 | string | -    | `auto` |
+| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` |
+
+:::
+
+
+::: title stepItem步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| title| 标题 | string    | - | - |
+| content | 内容描述 | string  | - | -|
+| icon | 图标 | string  | - | -|
+| status | 状态 | string  | `primary` `success` `fail` `warning` | `primary`|
+
+
+:::
+
+::: title stepItem步骤条slot
+:::
+
+::: table
+
+| 属性  | 描述 | 
+| ----- | ---- | 
+| pace | 圆圈内容自定义 | 
+| default | 内容区域自定义 |
+
+:::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/src/entry-server.ts b/example/src/entry-server.ts
index f05fd03b..e405f83b 100644
--- 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 "";
   }
 }
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index dc8580db..652ad3be 100644
--- 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/step",
+            component: () => import("../../docs/zh-CN/components/step.md"),
+            meta: { title: "分步" },
           },
           {
-            path: '/zh-CN/components/layout',
-            component: () => import('../../docs/zh-CN/components/layout.md'),
-            meta: { title: '布局' },
+            path: "/zh-CN/components/skeleton",
+            component: () => import("../../docs/zh-CN/components/skeleton.md"),
+            meta: { title: "骨架屏" },
           },
           {
-            path: '/zh-CN/components/color',
-            component: () => import('../../docs/zh-CN/components/color.md'),
-            meta: { title: '颜色' },
+            path: "/zh-CN/components/layout",
+            component: () => import("../../docs/zh-CN/components/layout.md"),
+            meta: { title: "布局" },
           },
           {
-            path: '/zh-CN/components/container',
-            component: () => import('../../docs/zh-CN/components/container.md'),
-            meta: { title: '容器' },
+            path: "/zh-CN/components/color",
+            component: () => import("../../docs/zh-CN/components/color.md"),
+            meta: { title: "颜色" },
           },
           {
-            path: '/zh-CN/components/breadcrumb',
+            path: "/zh-CN/components/container",
+            component: () => import("../../docs/zh-CN/components/container.md"),
+            meta: { title: "容器" },
+          },
+          {
+            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/table",
+            component: () => import("../../docs/zh-CN/components/table.md"),
+            meta: { title: "表格" },
           },
           {
-            path: '/zh-CN/components/avatar',
-            component: () => import('../../docs/zh-CN/components/avatar.md'),
-            meta: { title: '头像' },
+            path: "/zh-CN/components/avatar",
+            component: () => import("../../docs/zh-CN/components/avatar.md"),
+            meta: { title: "头像" },
           },
           {
-            path: '/zh-CN/components/field',
-            component: () => import('../../docs/zh-CN/components/field.md'),
-            meta: { title: '字段' },
+            path: "/zh-CN/components/field",
+            component: () => import("../../docs/zh-CN/components/field.md"),
+            meta: { title: "字段" },
           },
           {
-            path: '/zh-CN/components/empty',
-            component: () => import('../../docs/zh-CN/components/empty.md'),
-            meta: { title: '空' },
+            path: "/zh-CN/components/empty",
+            component: () => import("../../docs/zh-CN/components/empty.md"),
+            meta: { title: "空" },
           },
           {
-            path: '/zh-CN/components/rate',
-            component: () => import('../../docs/zh-CN/components/rate.md'),
-            meta: { title: '评分' },
+            path: "/zh-CN/components/rate",
+            component: () => import("../../docs/zh-CN/components/rate.md"),
+            meta: { title: "评分" },
           },
           {
-            path: '/zh-CN/components/dropdown',
-            component: () => import('../../docs/zh-CN/components/dropdown.md'),
-            meta: { title: '下拉' },
+            path: "/zh-CN/components/dropdown",
+            component: () => import("../../docs/zh-CN/components/dropdown.md"),
+            meta: { title: "下拉" },
           },
           {
-            path: '/zh-CN/components/tab',
-            component: () => import('../../docs/zh-CN/components/tab.md'),
-            meta: { title: '选项卡' },
+            path: "/zh-CN/components/tab",
+            component: () => import("../../docs/zh-CN/components/tab.md"),
+            meta: { title: "选项卡" },
           },
           {
-            path: '/zh-CN/components/iconPicker',
+            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;
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 5443eac9..0d1a3e66 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -44,362 +44,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',
+            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: 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: "setup",
+            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>
diff --git a/src/index.ts b/src/index.ts
index 30bc9169..1ebbc37b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,8 +67,10 @@ import LayCarouselItem from "./module/carouselItem/index";
 import LayColorPicker from "./module/colorPicker/index";
 import LayTooltip from "./module/tooltip/index";
 import LayInputNumber from "./module/inputNumber/index";
-import LaySkeleton from './module/skeleton/index';
-import LaySkeletonItem from './module/skeletonItem/index';
+import LaySkeleton from "./module/skeleton/index";
+import LaySkeletonItem from "./module/skeletonItem/index";
+import LayStep from "./module/step/index";
+import LayStepItem from "./module/stepItem/index";
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -134,6 +136,8 @@ const components: Record<string, IDefineComponent> = {
   LaySkeleton,
   LaySkeletonItem,
   LayCountUp,
+  LayStep,
+  LayStepItem,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -146,6 +150,8 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
+  LayStep,
+  LayStepItem,
   LaySkeleton,
   LaySkeletonItem,
   LayRadio,
@@ -205,7 +211,7 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal
+  LayModal,
 };
 
 export { layer };
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index e9de0ceb..afdc5d59 100644
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -108,13 +108,13 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
 
 let rangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
   rangeValue.value = props.modelValue;
 }
 
 let verticalRangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
   verticalRangeValue.value = props.modelValue;
 }
 
diff --git a/src/module/step/index.less b/src/module/step/index.less
new file mode 100644
index 00000000..95e78172
--- /dev/null
+++ b/src/module/step/index.less
@@ -0,0 +1,191 @@
+@width-height-pace: 20px;
+@step-color: #5FB878;
+
+.lay-step{
+  display: flex;
+  flex-wrap: nowrap;
+  .lay-step-item{
+    flex-grow: 1;
+  }
+
+  .is-item-center{
+    text-align: center;
+  }
+
+  .lay-step-item-last {
+    flex-grow: 0 !important;
+  }
+  .lay-step-item-pace{
+    width: @width-height-pace;
+    height: @width-height-pace;
+    border: 2px #8D8D8D solid;
+    border-radius: 50%;
+    text-align: center;
+    line-height: @width-height-pace;
+    background: #FFFFFF;
+  }
+  .is-center{
+    margin: 0 auto;
+  }
+  .lay-step-item-active{
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+  .lay-step-item-wait{
+    border: 2px #000000 solid;
+    color: #000000;
+  }
+
+  .lay-step-item--success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item--fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item--warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item--primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item-fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item-warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item-primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-content{
+    color: #8D8D8D;
+    .lay-step-item-content-title{
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  .lay-step-item-content-active{
+    color: @step-color;
+  }
+
+  .lay-step-item-content--success{
+    color: @step-color;
+  }
+  .lay-step-item-content--fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content--warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content--primary{
+    color: #1E9FFF;
+  }
+
+  .lay-step-item-content-wait{
+    color: #000000;
+  }
+  .lay-step-item-content-success{
+    color: @step-color;
+  }
+  .lay-step-item-content-fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content-warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content-primary{
+    color: #1E9FFF;
+  }
+
+
+  .lay-step-item-line{
+    position: relative;
+  }
+
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    height: 2px;
+    width: 100%;
+    background: #C9C5C5;
+  }
+  .is-line-center:before {
+    left: 50%;
+  }
+
+  .lay-step-item-line-active:before {
+    transition: background 150ms;
+    background: #5FB878 !important;
+  }
+
+  .lay-step-item-line-fail:before {
+    transition: background 150ms;
+    background: #FF5722 !important;
+  }
+
+  .lay-step-item-line-warning:before {
+    transition: background 150ms;
+    background: #FFB800 !important;
+  }
+
+  .lay-step-item-line-primary:before {
+    transition: background 150ms;
+    background: #1E9FFF !important;
+  }
+
+}
+.lay-step-column {
+  height: 100%;
+  flex-flow: column;
+  .lay-step-item-line{
+    position: relative;
+    height: 100%;
+    width: 24px;
+  }
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    width: 2px;
+    height: 100%;
+    background: #C9C5C5;
+  }
+  .is-vertical{
+    display: flex;
+  }
+}
\ No newline at end of file
diff --git a/src/module/step/index.ts b/src/module/step/index.ts
new file mode 100644
index 00000000..653031e9
--- /dev/null
+++ b/src/module/step/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetup", Component);
+};
+
+export default Component as IDefineComponent;
diff --git a/src/module/step/index.vue b/src/module/step/index.vue
new file mode 100644
index 00000000..9dc9d4cf
--- /dev/null
+++ b/src/module/step/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup name="layStep" lang="ts">
+import { ref, watch, provide, defineProps, withDefaults } from "vue";
+import "./index.less";
+
+export interface LayStepProps {
+  active?: number;
+  center?: boolean;
+  direction?: string;
+  space?: string;
+  currentStatus?: string;
+}
+
+const props = withDefaults(defineProps<LayStepProps>(), {
+  active: 0,
+  center: false,
+  direction: "horizontal",
+  space: "auto",
+  currentStatus: "primary",
+});
+
+const steps = ref([]);
+
+watch(steps, () => {
+  steps.value.forEach(
+    (instance: { setIndex: (arg0: any) => void }, index: any) => {
+      instance.setIndex(index);
+    }
+  );
+});
+
+provide("LayStep", {
+  props,
+  steps,
+});
+</script>
+
+<style scoped></style>
diff --git a/src/module/stepItem/index.ts b/src/module/stepItem/index.ts
new file mode 100644
index 00000000..9b8c7296
--- /dev/null
+++ b/src/module/stepItem/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetupItem", Component);
+};
+
+export default Component as IDefineComponent;
diff --git a/src/module/stepItem/index.vue b/src/module/stepItem/index.vue
new file mode 100644
index 00000000..912681a9
--- /dev/null
+++ b/src/module/stepItem/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div
+    :class="[
+      'lay-step-item',
+      isLast && !isCenter ? 'lay-step-item-last' : '',
+      isCenter ? 'is-item-center' : '',
+      isVertical ? 'is-vertical' : '',
+    ]"
+    :style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
+  >
+    <div
+      :class="[
+        !isLast
+          ? isLineActive
+            ? `lay-step-item-line lay-step-item-line-${status || 'active'}`
+            : 'lay-step-item-line'
+          : '',
+        isCenter ? 'is-line-center' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'lay-step-item-pace',
+          isActive ? `lay-step-item-active` : '',
+          isCurrent === index ? `lay-step-item--${currentStatus}` : '',
+          status ? `lay-step-item-${status}` : '',
+          isWait ? 'lay-step-item-wait' : '',
+          isCenter ? 'is-center' : '',
+        ]"
+      >
+        <slot name="pace">
+          <template v-if="icon">
+            <lay-icon :type="icon"></lay-icon>
+          </template>
+          <template v-else>
+            <span v-if="!isActive">{{ index + 1 }}</span>
+            <lay-icon
+              v-else
+              :type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
+            ></lay-icon>
+          </template>
+        </slot>
+      </div>
+    </div>
+    <slot>
+      <div
+        :class="[
+          'lay-step-item-content',
+          isActive ? `lay-step-item-content-active` : '',
+          isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
+          status ? `lay-step-item-content-${status}` : '',
+          isWait ? 'lay-step-item-content-wait' : '',
+        ]"
+      >
+        <div class="lay-step-item-content-title">{{ title }}</div>
+        <p>{{ content }}</p>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup name="LayStepItem" lang="ts">
+import {
+  ref,
+  inject,
+  onMounted,
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  reactive,
+  defineProps,
+  withDefaults,
+} from "vue";
+
+import type { ComputedRef } from "vue";
+
+export interface LayStepItemProps {
+  title?: string;
+  content?: string;
+  icon?: string;
+  status?: string;
+}
+
+const props = withDefaults(defineProps<LayStepItemProps>(), {
+  title: "",
+  content: "",
+  icon: "",
+  status: "",
+});
+
+const index = ref(-1);
+const parents: any = inject("LayStep");
+const currentInstance: any = getCurrentInstance();
+const setIndex = (val: number) => {
+  index.value = val;
+};
+
+const stepsCount = computed(() => {
+  return parents.steps.value.length;
+});
+
+const currentStatus = computed(() => {
+  return parents.props.currentStatus;
+});
+const isCurrent = computed(() => {
+  return parents.props.active;
+});
+console.log(isCurrent);
+const space = computed(() => {
+  return parents.props.space;
+});
+
+const isVertical = computed(() => {
+  return parents.props.direction === "vertical";
+});
+
+const isCenter = computed(() => {
+  return parents.props.center;
+});
+
+const isLineActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active - 1;
+});
+
+const isWait: ComputedRef<boolean> = computed(() => {
+  return index.value === parents.props.active + 1;
+});
+
+const isActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active;
+});
+const isLast: ComputedRef<boolean> = computed(() => {
+  return (
+    parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
+  );
+});
+
+const stepItemState = reactive({
+  itemId: computed(() => currentInstance?.uid),
+  setIndex,
+});
+
+parents.steps.value = [...parents.steps.value, stepItemState];
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  parents.steps.value = parents.steps.value.filter(
+    (instance: { itemId: any }) => instance.itemId !== currentInstance.uid
+  );
+});
+</script>

From d3e57feb5de38f3ec83ffc0ec2e9b3380e3b2bba Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Tue, 4 Jan 2022 18:19:21 +0800
Subject: [PATCH 2/2] =?UTF-8?q?1.=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/router/zh-CN.ts | 469 ++++++++++++++++++------------------
 1 file changed, 240 insertions(+), 229 deletions(-)

diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 746ed43d..8f5347f9 100644
--- 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
\ No newline at end of file
+export default zhCN;