diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 996bce7f..9a3cb413 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 在实用价值的前提之下，我们并没有内置过多花俏的动画。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 82c010f9..bdacef34 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 按钮用于开始一个即时操作。
+:::
+
 ::: title 基础使用
 :::
 
@@ -206,7 +212,7 @@ export default {
 ::: title 按钮容器
 :::
 
-::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
+::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
 
 <template>
   <lay-button-container>
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 9219982c..3061ceb5 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感。
+:::
+
 ::: title 主色调
 :::
 
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
index 8a82c51f..8dfaf67d 100644
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 栅格化系统，是基于行（row）和列（col）来定义区块的外部框架，以保证页面的元素能够稳健地排布起来。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/icon.md b/example/docs/zh-CN/components/icon.md
index 34922dab..96b92998 100644
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 语义化的矢量图形。使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
index e14519ce..4566fb3a 100644
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 通过鼠标或键盘输入内容，是最基础的表单域的包装。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
index 6618c897..027774cd 100644
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/skeleton.md b/example/docs/zh-CN/components/skeleton.md
index 8afd1570..ae6e45df 100644
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -1,10 +1,15 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 在需要等待加载内容的位置提供一个占位图形组合。
+:::
+
 ::: title 基础使用
 :::
 
-
 ::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
 
 <template>
diff --git a/example/docs/zh-CN/components/step.md b/example/docs/zh-CN/components/step.md
index 9ceb962e..79fe9a6f 100644
--- a/example/docs/zh-CN/components/step.md
+++ b/example/docs/zh-CN/components/step.md
@@ -4,7 +4,6 @@
 ::: title 基础使用
 :::
 
-
 ::: demo
 
 <template>
diff --git a/example/docs/zh-CN/components/switch.md b/example/docs/zh-CN/components/switch.md
index 2adbf764..7661bf47 100644
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 开关选择器, 需要表示开关状态/两种状态之间的切换时。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/timeline.md b/example/docs/zh-CN/components/timeline.md
index 41647bd9..f2987395 100644
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/guide/getStarted.md b/example/docs/zh-CN/guide/getStarted.md
index da40562f..42e0a909 100644
--- a/example/docs/zh-CN/guide/getStarted.md
+++ b/example/docs/zh-CN/guide/getStarted.md
@@ -4,13 +4,11 @@
 ```
 npm install @layui/layui-vue --save
 ```
-:::describe 或
-:::
+
 ```
 yarn add @layui/layui-vue --save
 ```
-:::describe 或
-:::
+
 ```
 pnpm install @layui/layui-vue --save
 ```
diff --git a/example/src/plugin/create-describe.ts b/example/src/plugin/create-describe.ts
index 15ad156c..e0a4c8fb 100644
--- a/example/src/plugin/create-describe.ts
+++ b/example/src/plugin/create-describe.ts
@@ -18,7 +18,7 @@ export default function createContainer(
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<p style="margin-left: 24px;margin-bottom:20px;">${info}`
+          return `<p style="padding-left: 30px;padding-top: 20px;padding-bottom: 20px;">${info}`
         } else {
           return '</p>\n'
         }
diff --git a/src/component/avatar/index.vue b/src/component/avatar/index.vue
index abb8b165..b3b0c1c1 100644
--- a/src/component/avatar/index.vue
+++ b/src/component/avatar/index.vue
@@ -7,11 +7,13 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 
-const props = defineProps<{
+export interface LayAvatarProps {
   src?: String;
   size?: string;
   radius?: boolean;
-}>();
+}
+
+const props = withDefaults(defineProps<LayAvatarProps>(), {});
 </script>
 
 <template>
diff --git a/src/component/backTop/index.vue b/src/component/backTop/index.vue
index 390e58cd..7006333b 100644
--- a/src/component/backTop/index.vue
+++ b/src/component/backTop/index.vue
@@ -16,11 +16,9 @@ import LayIcon from "../icon/index";
 import "./index.less";
 
 export interface LayBacktopProps {
-  /**通用*/
   target?: string;
   showHeight?: number;
   disabled?: boolean;
-  /**组件样式*/
   position?: "fixed" | "absolute";
   right?: number;
   bottom?: number;
@@ -30,7 +28,6 @@ export interface LayBacktopProps {
   color?: string;
   borderRadius?: number | string;
   circle?: boolean;
-  /**图标样式*/
   icon?: string;
   iconSize?: number;
   iconColor?: string;
diff --git a/src/component/backTop/interface.ts b/src/component/backTop/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/badge/interface.ts b/src/component/badge/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/breadcrumb/index.vue b/src/component/breadcrumb/index.vue
index a8fb48d0..eb550de6 100644
--- a/src/component/breadcrumb/index.vue
+++ b/src/component/breadcrumb/index.vue
@@ -7,10 +7,11 @@ export default {
 <script setup lang="ts">
 import { provide, withDefaults } from "vue";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayBreadcrumbProps {
     separator?: string;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayBreadcrumbProps>(),
   {
     separator: "/",
   }
diff --git a/src/component/breadcrumb/interface.ts b/src/component/breadcrumb/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/breadcrumbItem/index.vue b/src/component/breadcrumbItem/index.vue
index 6203f1a2..fab4971f 100644
--- a/src/component/breadcrumbItem/index.vue
+++ b/src/component/breadcrumbItem/index.vue
@@ -19,11 +19,13 @@ export default {
 <script setup lang="ts">
 import { inject, useSlots } from "vue";
 
+export interface LayBreadcrumbItemProps {
+  title?: string;
+}
+
 const slot = useSlots();
 
-const props = defineProps<{
-  title?: string;
-}>();
+const props = defineProps<LayBreadcrumbItemProps>();
 
 const separator = inject("separator");
 </script>
diff --git a/src/component/breadcrumbItem/interface.ts b/src/component/breadcrumbItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/button/interface.ts b/src/component/button/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/card/index.vue b/src/component/card/index.vue
index 0358e9cc..2dad999b 100644
--- a/src/component/card/index.vue
+++ b/src/component/card/index.vue
@@ -8,12 +8,12 @@ export default {
 import { useSlots } from "vue";
 import "./index.less";
 
-const slot = useSlots();
-
 export interface LayCardProps {
   title?: string;
 }
 
+const slot = useSlots();
+
 const props = defineProps<LayCardProps>();
 </script>
 
diff --git a/src/component/card/interface.ts b/src/component/card/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/checkbox/interface.ts b/src/component/checkbox/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/checkboxGroup/interface.ts b/src/component/checkboxGroup/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/col/index.vue b/src/component/col/index.vue
index 3765f057..e4253419 100644
--- a/src/component/col/index.vue
+++ b/src/component/col/index.vue
@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+export interface LayColProps {
   md?: string;
   xs?: string;
   sm?: string;
@@ -15,8 +15,10 @@ const props = defineProps<{
   mdOffset?: string;
   xsOffset?: string;
   smOffset?: string;
-  lgOffset?: string;
-}>();
+  lgOffset?: string; 
+}
+
+const props = defineProps<LayColProps>();
 
 const classes = computed(() => {
   return [
diff --git a/src/component/col/interface.ts b/src/component/col/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/collapse/index.vue b/src/component/collapse/index.vue
index 09da8462..483cae65 100644
--- a/src/component/collapse/index.vue
+++ b/src/component/collapse/index.vue
@@ -12,11 +12,12 @@ import {
   watch,
 } from "vue";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayCollapseProps {
     modelValue?: number | string | [];
     accordion?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayCollapseProps>(),
   {
     modelValue: () => [],
     accordion: false,
diff --git a/src/component/collapse/interface.ts b/src/component/collapse/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/collapseItem/index.vue b/src/component/collapseItem/index.vue
index 7fef0886..e3c0d4c0 100644
--- a/src/component/collapseItem/index.vue
+++ b/src/component/collapseItem/index.vue
@@ -7,12 +7,13 @@ export default {
 <script setup lang="ts">
 import { withDefaults, inject, computed, ref } from "vue";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayCollapseItemProps {
     id: number | string;
     title: string;
-    disabled?: boolean;
-  }>(),
+    disabled?: boolean;  
+}
+
+const props = withDefaults(defineProps<LayCollapseItemProps>(),
   {
     disabled: false,
   }
diff --git a/src/component/collapseItem/interface.ts b/src/component/collapseItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/container/interface.ts b/src/component/container/interface.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/component/container/interface.ts
@@ -0,0 +1 @@
+
diff --git a/src/component/countUp/index.vue b/src/component/countUp/index.vue
index 24a62cff..bf774bea 100644
--- a/src/component/countUp/index.vue
+++ b/src/component/countUp/index.vue
@@ -20,7 +20,7 @@ export interface LayCountupProps {
   decimalPlaces?: number; // 小数位数
   useGrouping?: boolean; // 是否使用千位分隔符
   separator?: string; // 千位分隔符
-  useEasing?: boolean;  // 使用动画
+  useEasing?: boolean; // 使用动画
   duration?: number; // 动画持续时间
   prefix?: string; // 前缀
   suffix?: string; // 后缀
diff --git a/src/component/countUp/interface.ts b/src/component/countUp/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/dropdown/index.vue b/src/component/dropdown/index.vue
index 37893032..38186018 100644
--- a/src/component/dropdown/index.vue
+++ b/src/component/dropdown/index.vue
@@ -8,13 +8,13 @@ export default {
 import { provide, ref, watch } from "vue";
 import { useClickOutside } from "@layui/hooks-vue";
 
-const dropdownRef = ref<null | HTMLElement>(null);
-const isClickOutside = useClickOutside(dropdownRef);
-
 export interface LayDropdownProps {
   trigger?: string;
 }
 
+const dropdownRef = ref<null | HTMLElement>(null);
+const isClickOutside = useClickOutside(dropdownRef);
+
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
 });
diff --git a/src/component/dropdown/interface.ts b/src/component/dropdown/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/empty/interface.ts b/src/component/empty/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/exception/index.vue b/src/component/exception/index.vue
index bf7c2438..3538d58a 100644
--- a/src/component/exception/index.vue
+++ b/src/component/exception/index.vue
@@ -8,9 +8,9 @@ import { useSlots } from "vue";
 import "./index.less";
 
 export interface LayDropdownProps {
-  title?: string,
-  status?: '401' | '403' | '404' | '500',
-  describe?: string
+  title?: string;
+  status?: "401" | "403" | "404" | "500";
+  describe?: string;
 }
 
 const slots = useSlots();
diff --git a/src/component/exception/interface.ts b/src/component/exception/interface.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/component/exception/interface.ts
@@ -0,0 +1 @@
+
diff --git a/src/component/field/index.vue b/src/component/field/index.vue
index 83f3ebef..e0ba8ef4 100644
--- a/src/component/field/index.vue
+++ b/src/component/field/index.vue
@@ -9,9 +9,11 @@ import { useSlots } from "vue";
 
 const slot = useSlots();
 
-const props = defineProps<{
-  title?: string;
-}>();
+export interface LayFieldProps {
+  title?: string;  
+}
+
+const props = defineProps<LayFieldProps>();
 </script>
 
 <template>
diff --git a/src/component/form/index.vue b/src/component/form/index.vue
index e0182bbd..d4cde350 100644
--- a/src/component/form/index.vue
+++ b/src/component/form/index.vue
@@ -13,8 +13,7 @@ import {
   modelType,
 } from "../../types/form";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayFormProps {
     model?: modelType;
     required?: boolean;
     rules?: Rule;
@@ -23,7 +22,9 @@ const props = withDefaults(
     requiredErrorMessage?: string;
     validateMessage?: ValidateMessages;
     useCN?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayFormProps>(),
   {
     model: function () {
       return {};
diff --git a/src/component/formItem/index.vue b/src/component/formItem/index.vue
index 3a871967..c7dabce5 100644
--- a/src/component/formItem/index.vue
+++ b/src/component/formItem/index.vue
@@ -31,15 +31,16 @@ import Schema, {
 } from "async-validator";
 import cnValidateMessage from "./cnValidateMessage";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayFormItemProps {
     prop?: string;
     mode?: string;
     label?: string;
     errorMessage?: string;
     rules?: Rule;
     required?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayFormItemProps>(),
   {
     mode: "block",
   }
diff --git a/src/component/iconPicker/interface.ts b/src/component/iconPicker/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/input/interface.ts b/src/component/input/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/inputNumber/interface.ts b/src/component/inputNumber/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/layout/interface.ts b/src/component/layout/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/line/index.vue b/src/component/line/index.vue
index 0f59c04d..54cbad74 100644
--- a/src/component/line/index.vue
+++ b/src/component/line/index.vue
@@ -5,9 +5,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
-  theme?: string;
-}>();
+export interface LayLineProps {
+  theme?: string; 
+}
+
+const props = defineProps<LayLineProps>();
 </script>
 
 <template>
diff --git a/src/component/menu/interface.ts b/src/component/menu/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/menuItem/index.vue b/src/component/menuItem/index.vue
index 6a503baf..c851048c 100644
--- a/src/component/menuItem/index.vue
+++ b/src/component/menuItem/index.vue
@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { inject, Ref, useSlots } from "vue";
 
+export interface LayMenuItemProps {
+  id: string;
+  title?: string; 
+}
+
 const slots = useSlots();
 
-const props = defineProps<{
-  id: string;
-  title?: string;
-}>();
+const props = defineProps<LayMenuItemProps>();
 
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 
diff --git a/src/component/page/index.vue b/src/component/page/index.vue
index f9b0743e..b665a5e9 100644
--- a/src/component/page/index.vue
+++ b/src/component/page/index.vue
@@ -1,68 +1,67 @@
 <script lang="ts">
 export default {
-	name: "LayPage"
-}
+  name: "LayPage",
+};
 </script>
 
 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
 
+export interface LayPageProps {
+  total: number;
+  limit: number;
+  theme?: string;
+  showPage?: boolean | string;
+  showSkip?: boolean | string;
+  showCount?: boolean | string;
+  showLimit?: boolean | string;
+  showInput?: boolean | string;
+  showRefresh?: boolean | string;
+  pages?: number;
+  limits?: number[];
+}
+
 const slots = useSlots();
 
-const props = withDefaults(
-	defineProps<{
-		total: number;
-		limit: number;
-		theme?: string;
-		showPage?: boolean | string;
-		showSkip?: boolean | string;
-		showCount?: boolean | string;
-		showLimit?: boolean | string;
-		showInput?: boolean | string;
-		showRefresh?: boolean | string;
-		pages?: number;
-		limits?: number[];
-	}>(),
-	{
-		limit: 10,
-		theme: "green",
-		showPage: false,
-		showSkip: false,
-		showCount: false,
-		showLimit: true,
-		showInput: false,
-		showRefresh: false,
-		pages: 10,
-		limits: () => [10, 20, 30, 40, 50],
-	}
-);
+const props = withDefaults(defineProps<LayPageProps>(), {
+  limit: 10,
+  theme: "green",
+  showPage: false,
+  showSkip: false,
+  showCount: false,
+  showLimit: true,
+  showInput: false,
+  showRefresh: false,
+  pages: 10,
+  limits: () => [10, 20, 30, 40, 50],
+});
 const limits = ref(props.limits);
 const pages = props.pages / 2;
 const inlimit = computed({
-	get() {
-		return props.limit;
-	},
-	set(v: number) {
-		emit("limit", v);
-	},
+  get() {
+    return props.limit;
+  },
+  set(v: number) {
+    emit("limit", v);
+  },
 });
 const maxPage = ref(0);
 const totalPage = computed(() => {
-	maxPage.value = Math.ceil(props.total / props.limit);
-	let r: number[] = [],
-		start =
-			maxPage.value <= props.pages
-				? 1
-				: currentPage.value > pages
-				? currentPage.value - pages
-				: 1;
-	for (let i = start; ; i++) {
-		if (r.length >= props.pages || i > maxPage.value) {
-			break;
-		}
-		r.push(i);
-	}
-	return r;
+  maxPage.value = Math.ceil(props.total / props.limit);
+  let r: number[] = [],
+    start =
+      maxPage.value <= props.pages
+        ? 1
+        : currentPage.value > pages
+        ? currentPage.value - pages
+        : 1;
+  for (let i = start; ; i++) {
+    if (r.length >= props.pages || i > maxPage.value) {
+      break;
+    }
+    r.push(i);
+  }
+  return r;
 });
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
@@ -70,100 +69,100 @@ const currentPageShow: Ref<number> = ref(currentPage.value);
 const emit = defineEmits(["jump", "limit"]);
 
 const prev = function () {
-	if (currentPage.value === 1) {
-		return;
-	}
-	currentPage.value--;
+  if (currentPage.value === 1) {
+    return;
+  }
+  currentPage.value--;
 };
 
 const next = function () {
-	if (currentPage.value === maxPage.value) {
-		return;
-	}
-	currentPage.value++;
+  if (currentPage.value === maxPage.value) {
+    return;
+  }
+  currentPage.value++;
 };
 
 const jump = function (page: number) {
-	currentPage.value = page;
+  currentPage.value = page;
 };
 
 const jumpPage = function () {
-	currentPage.value = currentPageShow.value;
+  currentPage.value = currentPageShow.value;
 };
 
 watch(inlimit, function () {
-	currentPage.value = 1;
-	// maxPage.value = Math.ceil(props.total / inlimit.value);
+  currentPage.value = 1;
+  // maxPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {
-	currentPageShow.value = currentPage.value;
-	emit("jump", { current: currentPage.value });
+  currentPageShow.value = currentPage.value;
+  emit("jump", { current: currentPage.value });
 });
 </script>
 
 <template>
-	<div class="layui-box layui-laypage layui-laypage-default">
-		<span v-if="showCount" class="layui-laypage-count"
-			>共 {{ total }} 条 {{ maxPage }} 页</span
-		>
-		<a
-			href="javascript:;"
-			class="layui-laypage-prev"
-			:class="[currentPage === 1 ? 'layui-disabled' : '']"
-			@click="prev()"
-		>
-			<slot v-if="slots.prev" name="prev"></slot>
-			<template v-else>上一页</template>
-		</a>
-		<template v-if="showPage">
-			<template v-for="index of totalPage" :key="index">
-				<span v-if="index === currentPage" class="layui-laypage-curr">
-					<em
-						class="layui-laypage-em"
-						:class="[theme ? 'layui-bg-' + theme : '']"
-					></em>
-					<em>{{ index }}</em>
-				</span>
-				<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
-			</template>
-		</template>
+  <div class="layui-box layui-laypage layui-laypage-default">
+    <span v-if="showCount" class="layui-laypage-count"
+      >共 {{ total }} 条 {{ maxPage }} 页</span
+    >
+    <a
+      href="javascript:;"
+      class="layui-laypage-prev"
+      :class="[currentPage === 1 ? 'layui-disabled' : '']"
+      @click="prev()"
+    >
+      <slot v-if="slots.prev" name="prev"></slot>
+      <template v-else>上一页</template>
+    </a>
+    <template v-if="showPage">
+      <template v-for="index of totalPage" :key="index">
+        <span v-if="index === currentPage" class="layui-laypage-curr">
+          <em
+            class="layui-laypage-em"
+            :class="[theme ? 'layui-bg-' + theme : '']"
+          ></em>
+          <em>{{ index }}</em>
+        </span>
+        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+      </template>
+    </template>
 
-		<a
-			href="javascript:;"
-			class="layui-laypage-next"
-			:class="[currentPage === maxPage ? 'layui-disabled' : '']"
-			@click="next()"
-		>
-			<slot v-if="slots.next" name="next"></slot>
-			<template v-else>下一页</template>
-		</a>
-		<span v-if="showLimit" class="layui-laypage-limits">
-			<select v-model="inlimit">
-				<option v-for="val of limits" :key="val" :value="val">
-					{{ val }} 条/页
-				</option>
-			</select>
-		</span>
-		<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-			<i class="layui-icon layui-icon-refresh"></i>
-		</a>
-		<span v-if="showSkip" class="layui-laypage-skip">
-			到第
-			<input
-				v-model="currentPageShow"
-				@keypress.enter="jumpPage()"
-				type="number"
-				class="layui-input layui-input-number"
-			/>页
-			<button
-				type="button"
-				class="layui-laypage-btn"
-				@click="jumpPage()"
-				:disabled="currentPageShow > maxPage"
-			>
-				确定
-			</button>
-		</span>
-	</div>
+    <a
+      href="javascript:;"
+      class="layui-laypage-next"
+      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      @click="next()"
+    >
+      <slot v-if="slots.next" name="next"></slot>
+      <template v-else>下一页</template>
+    </a>
+    <span v-if="showLimit" class="layui-laypage-limits">
+      <select v-model="inlimit">
+        <option v-for="val of limits" :key="val" :value="val">
+          {{ val }} 条/页
+        </option>
+      </select>
+    </span>
+    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
+      <i class="layui-icon layui-icon-refresh"></i>
+    </a>
+    <span v-if="showSkip" class="layui-laypage-skip">
+      到第
+      <input
+        v-model="currentPageShow"
+        @keypress.enter="jumpPage()"
+        type="number"
+        class="layui-input layui-input-number"
+      />页
+      <button
+        type="button"
+        class="layui-laypage-btn"
+        @click="jumpPage()"
+        :disabled="currentPageShow > maxPage"
+      >
+        确定
+      </button>
+    </span>
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/component/page/interface.ts b/src/component/page/interface.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/component/page/interface.ts
@@ -0,0 +1 @@
+
diff --git a/src/component/popper/index.vue b/src/component/popper/index.vue
index 44806f6d..d7c6a601 100644
--- a/src/component/popper/index.vue
+++ b/src/component/popper/index.vue
@@ -30,8 +30,8 @@ import {
   onMounted,
 } from "vue";
 import { on } from "../../utils/domUtil";
-const props = withDefaults(
-  defineProps<{
+
+export interface LayPopperProps {
     el: any;
     content?: string | Number;
     position?: string;
@@ -41,7 +41,9 @@ const props = withDefaults(
     disabled?: boolean;
     visible?: boolean;
     isCanHide?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayPopperProps>(),
   {
     position: 'top',
     isDark: true,
diff --git a/src/component/progress/index.vue b/src/component/progress/index.vue
index e4fc3b2d..536c4078 100644
--- a/src/component/progress/index.vue
+++ b/src/component/progress/index.vue
@@ -7,14 +7,16 @@ export default {
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+export interface LayProgressProps {
   percent: number | string;
   theme?: string;
   color?: string;
   size?: string;
   showText?: boolean;
   text?: string;
-}>();
+}
+
+const props = defineProps<LayProgressProps>();
 
 const styles = computed(() => {
   return [
diff --git a/src/component/progress/interface.ts b/src/component/progress/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/radio/index.vue b/src/component/radio/index.vue
index b4e0c2b6..337111e1 100644
--- a/src/component/radio/index.vue
+++ b/src/component/radio/index.vue
@@ -5,12 +5,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
+export interface LayRadioProps {
   modelValue: string;
   disabled?: boolean;
   label?: string;
   name: string;
-}>();
+}
+
+const props = defineProps<LayRadioProps>();
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/src/component/radio/interface.ts b/src/component/radio/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/rate/interface.ts b/src/component/rate/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/result/interface.ts b/src/component/result/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/row/interface.ts b/src/component/row/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index bb961361..07eaab98 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -20,6 +20,16 @@ import {
 import { useClickOutside } from "@layui/hooks-vue";
 import { SelectItem } from "../../types";
 
+export interface LaySelectProps {
+    modelValue?: string | number | [] | null;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    showEmpty?: boolean;
+    emptyMessage?: string;
+    multiple?: boolean;
+}
+
 const selectRef = ref<null | HTMLElement>(null);
 const isClickOutside = useClickOutside(selectRef);
 
@@ -30,15 +40,7 @@ watch(isClickOutside, () => {
 });
 
 const props = withDefaults(
-	defineProps<{
-		modelValue?: string | number | [] | null;
-		name?: string;
-		placeholder?: string;
-		disabled?: boolean;
-		showEmpty?: boolean;
-		emptyMessage?: string;
-		multiple?: boolean;
-	}>(),
+	defineProps<LaySelectProps>(),
 	{
 		modelValue: null,
 		placeholder: "请选择",
diff --git a/src/component/select/interface.ts b/src/component/select/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/selectOption/index.vue b/src/component/selectOption/index.vue
index b3fd38d3..faaebf98 100644
--- a/src/component/selectOption/index.vue
+++ b/src/component/selectOption/index.vue
@@ -9,12 +9,13 @@ import LayCheckbox from "../checkbox";
 import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
 import { computed, inject, onMounted, Ref } from "vue";
 
-const props = withDefaults(
-	defineProps<{
-		value: string | null | undefined;
-		label?: string;
-		disabled?: boolean;
-	}>(),
+export interface LaySelectOptionProps {
+    value: string | null | undefined;
+    label?: string;
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<LaySelectOptionProps>(),
 	{
 		disabled: false,
 	}
diff --git a/src/component/selectOption/interface.ts b/src/component/selectOption/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/side/index.vue b/src/component/side/index.vue
index b72452c0..59bca2c4 100644
--- a/src/component/side/index.vue
+++ b/src/component/side/index.vue
@@ -9,7 +9,7 @@ import { computed, CSSProperties } from "vue";
 import "./index.less";
 
 export interface LaySideProps {
-  width?: string | number;
+    width?: string | number;
 }
 
 const props = withDefaults(defineProps<LaySideProps>(), {
diff --git a/src/component/side/interface.ts b/src/component/side/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/skeleton/interface.ts b/src/component/skeleton/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/skeletonItem/index.vue b/src/component/skeletonItem/index.vue
index c32a708c..f7cb34c1 100644
--- a/src/component/skeletonItem/index.vue
+++ b/src/component/skeletonItem/index.vue
@@ -8,7 +8,7 @@ export default {
 import { withDefaults} from "vue";
 
 export interface LaySkeletonProps {
-  type?: string;
+    type?: string;
 }
 
 const props = withDefaults(defineProps<LaySkeletonProps>(), {
diff --git a/src/component/skeletonItem/interface.ts b/src/component/skeletonItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/slider/index.vue b/src/component/slider/index.vue
index a44857da..1b744216 100644
--- a/src/component/slider/index.vue
+++ b/src/component/slider/index.vue
@@ -106,20 +106,20 @@ import { Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
-const emit = defineEmits(["update:modelValue"]);
-
-interface LaySliderProps {
-  vertical?: boolean;
-  modelValue?: number | Array<number>;
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  range?: boolean;
-  verticalrange?: number[];
-  standardrange?: number[];
+export interface LaySliderProps {
+    vertical?: boolean;
+    modelValue?: number | Array<number>;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    range?: boolean;
+    verticalrange?: number[];
+    standardrange?: number[];
 }
 
+const emit = defineEmits(["update:modelValue"]);
+
 const props = withDefaults(defineProps<LaySliderProps>(), {
   vertical: false,
   modelValue: 0,
diff --git a/src/component/slider/interface.ts b/src/component/slider/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/splitPanel/index.vue b/src/component/splitPanel/index.vue
index 2a411f98..a58f6f9d 100644
--- a/src/component/splitPanel/index.vue
+++ b/src/component/splitPanel/index.vue
@@ -8,16 +8,16 @@ export default {
 import { ref, watch, provide, withDefaults, onMounted } from "vue";
 import "./index.less";
 
-// 属性接口定义
 export interface LayStepProps {
-  vertical?: boolean;
-  minSize?: number;
+    vertical?: boolean;
+    minSize?: number;
 }
-// props初始化数据定义
+
 const props = withDefaults(defineProps<LayStepProps>(), {
   vertical: false,
   minSize: 50,
 });
+
 let domEvent = ref();
 let domStatus = ref(false);
 const target = ref();
diff --git a/src/component/splitPanel/interface.ts b/src/component/splitPanel/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/splitPanelItem/index.vue b/src/component/splitPanelItem/index.vue
index 0c8c58b0..71b4dbb4 100644
--- a/src/component/splitPanelItem/index.vue
+++ b/src/component/splitPanelItem/index.vue
@@ -20,7 +20,7 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-  space?: number;
+    space?: number;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {
diff --git a/src/component/splitPanelItem/interface.ts b/src/component/splitPanelItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/step/index.vue b/src/component/step/index.vue
index fd945bfd..43c41e56 100644
--- a/src/component/step/index.vue
+++ b/src/component/step/index.vue
@@ -14,13 +14,13 @@ import {
 import "./index.less";
 
 export interface LayStepProps {
-  active?: number;
-  center?: boolean;
-  direction?: string;
-  space?: string;
-  currentStatus?: string;
-  composition?: string;
-  simple?: boolean;
+    active?: number;
+    center?: boolean;
+    direction?: string;
+    space?: string;
+    currentStatus?: string;
+    composition?: string;
+    simple?: boolean;
 }
 
 const props = withDefaults(defineProps<LayStepProps>(), {
diff --git a/src/component/step/interface.ts b/src/component/step/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/stepItem/index.vue b/src/component/stepItem/index.vue
index fceda485..13613eb4 100644
--- a/src/component/stepItem/index.vue
+++ b/src/component/stepItem/index.vue
@@ -19,10 +19,10 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-  title?: string;
-  content?: string;
-  icon?: string;
-  status?: string;
+    title?: string;
+    content?: string;
+    icon?: string;
+    status?: string;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {
diff --git a/src/component/stepItem/interface.ts b/src/component/stepItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/subMenu/index.vue b/src/component/subMenu/index.vue
index 9ae2e67e..e273de3c 100644
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { computed, inject, Ref, useSlots } from "vue";
 
-const slots = useSlots();
-
-const props = defineProps<{
+export interface LaySubMenuProps {
   id: string;
   title?: string;
-}>();
+}
+
+const slots = useSlots();
+
+const props = defineProps<LaySubMenuProps>();
 
 const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
diff --git a/src/component/subMenu/interface.ts b/src/component/subMenu/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/switch/interface.ts b/src/component/switch/interface.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/component/switch/interface.ts
@@ -0,0 +1 @@
+
diff --git a/src/component/tab/index.vue b/src/component/tab/index.vue
index 016f1e6a..55992e8a 100644
--- a/src/component/tab/index.vue
+++ b/src/component/tab/index.vue
@@ -17,6 +17,14 @@ import {
   watch,
 } from "vue";
 
+export interface LayTabProps {
+  type?: string;
+  modelValue: string;
+  allowClose?: boolean;
+  beforeClose?: Function;
+  beforeLeave?: Function;
+}
+
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const childrens: Ref<VNode[]> = ref([]);
@@ -32,13 +40,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   });
 };
 
-const props = defineProps<{
-  type?: string;
-  modelValue: string;
-  allowClose?: boolean;
-  beforeClose?: Function;
-  beforeLeave?: Function;
-}>();
+const props = defineProps<LayTabProps>();
 
 const emit = defineEmits(["update:modelValue", "change", "close"]);
 
diff --git a/src/component/tab/interface.ts b/src/component/tab/interface.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/component/tab/interface.ts
@@ -0,0 +1 @@
+
diff --git a/src/component/tabItem/index.vue b/src/component/tabItem/index.vue
index 2696bfa7..df8eb6e9 100644
--- a/src/component/tabItem/index.vue
+++ b/src/component/tabItem/index.vue
@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { withDefaults, inject, Ref } from "vue";
 
-const props = withDefaults(
-  defineProps<{
+export interface LayTabItemProps {
     id: string;
     title: string;
-    closable?: boolean | string;
-  }>(),
+    closable?: boolean | string;  
+}
+
+const props = withDefaults(
+  defineProps<LayTabItemProps>(),
   {
     closable: true,
   }
diff --git a/src/component/tabItem/interface.ts b/src/component/tabItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/table/index.vue b/src/component/table/index.vue
index 23981a4c..ae9740e1 100644
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@@ -22,8 +22,7 @@ import "./index.less";
 
 const tableId = guid();
 
-const props = withDefaults(
-  defineProps<{
+export interface LayTableProps {
     id?: string;
     skin?: string;
     size?: string;
@@ -32,8 +31,10 @@ const props = withDefaults(
     columns: Recordable[];
     dataSource: Recordable[];
     defaultToolbar?: boolean;
-    selectedKeys?: Recordable[];
-  }>(),
+    selectedKeys?: Recordable[];  
+}
+
+const props = withDefaults(defineProps<LayTableProps>(),
   {
     id: "id",
     size: "md",
diff --git a/src/component/table/interface.ts b/src/component/table/interface.ts
new file mode 100644
index 00000000..f5314af9
--- /dev/null
+++ b/src/component/table/interface.ts
@@ -0,0 +1 @@
+import { Recordable } from "../../types";
\ No newline at end of file
diff --git a/src/component/textarea/index.vue b/src/component/textarea/index.vue
index 81389613..cceabd87 100644
--- a/src/component/textarea/index.vue
+++ b/src/component/textarea/index.vue
@@ -6,10 +6,10 @@ export default {
 
 <script setup lang="ts">
 export interface LayTextareaProps {
-  name?: string;
-  modelValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
+    name?: string;
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
 }
 
 const props = defineProps<LayTextareaProps>();
diff --git a/src/component/textarea/interface.ts b/src/component/textarea/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/timelineItem/index.vue b/src/component/timelineItem/index.vue
index ef3d2a2f..7cb932d6 100644
--- a/src/component/timelineItem/index.vue
+++ b/src/component/timelineItem/index.vue
@@ -7,13 +7,13 @@ export default {
 <script setup lang="ts">
 import { useSlots } from "vue";
 
-const slot = useSlots();
-
 export interface LayTimelineItemProps {
   title: string;
   simple?: boolean;
 }
 
+const slot = useSlots();
+
 const props = defineProps<LayTimelineItemProps>();
 </script>
 
diff --git a/src/component/timelineItem/interface.ts b/src/component/timelineItem/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/transfer/index.vue b/src/component/transfer/index.vue
index d92d5ef1..3958ac73 100644
--- a/src/component/transfer/index.vue
+++ b/src/component/transfer/index.vue
@@ -9,14 +9,14 @@ import "./index.less";
 import { Ref, ref, useSlots, watch } from "vue";
 import { Recordable } from "../../types";
 
-const slot = useSlots();
-
 export interface LayTransferProps {
   id?: string;
   title?: string[];
   dataSource: Recordable[];
 }
 
+const slot = useSlots();
+
 const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
   title: () => ["主列表", "副列表"],
diff --git a/src/component/transfer/interface.ts b/src/component/transfer/interface.ts
new file mode 100644
index 00000000..347e3ef0
--- /dev/null
+++ b/src/component/transfer/interface.ts
@@ -0,0 +1,2 @@
+import { Recordable } from "../../types";
+