diff --git a/.eslintignore b/.eslintignore
index 37bc6a7..7c04f0e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,28 @@
-dist
-public
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-commitlint.config.js
\ No newline at end of file
+*.tsbuildinfo
diff --git a/.prettierignore b/.prettierignore
index 37bc6a7..7c04f0e 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,28 @@
-dist
-public
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-commitlint.config.js
\ No newline at end of file
+*.tsbuildinfo
diff --git a/.stylelintignore b/.stylelintignore
index 37bc6a7..7c04f0e 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,5 +1,28 @@
-dist
-public
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-commitlint.config.js
\ No newline at end of file
+*.tsbuildinfo
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a56790f..fa90dbd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.0.1](https://github.com/zero-one-code/vue-default-page/compare/v1.0.0...v1.0.1) (2024-02-20)
+
+
+### Bug Fixes
+
+* export types ([9c8107c](https://github.com/zero-one-code/vue-default-page/commit/9c8107c80300661bb822a00f26d58db02c4ea252))
+
 ## 1.0.0 (2024-02-15)
 
 
diff --git a/README.md b/README.md
index da419e8..2779127 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ English | [中文](./README.zh-CN.md)
 
 A Vue 3.0 custom directives plugin, with built-in directives such as `v-loading`, `v-skeleton`, `v-skeleton-avatar`, `v-skeleton-list`, `v-error`, and `v-empty`, dedicated to addressing issues related to waiting, feedback, and error during network requests.
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-default-page?file=src%2FApp.vue)
+
 ## Table of Contents
 
 - [Installation](#installation)
@@ -101,6 +103,8 @@ Import to the component.
 <!-- demo.vue -->
 
 <script setup lang="js">
+  import { ref } from 'vue';
+
   const useRun = (api) => {
     const loading = ref(false);
     const error = ref(false);
@@ -121,12 +125,14 @@ Import to the component.
   };
 
   const data = ref([]);
-  const api = () => {
-    // Simulate a request, usually return a Promise
-    return setTimeout(() => {
-      data.value = Array.from({ length: 10 }, (v, k) => k);
-    }, 1000);
-  };
+  // Simulate a request
+  const api = () =>
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        data.value = Array.from({ length: 10 }, (v, k) => k);
+        resolve();
+      }, 2000);
+    });
 
   const [loading, error, init] = useRun(api);
 
@@ -284,7 +290,7 @@ Custom icon, same option as [v-error](#v-error) and [v-empty](#v-empty).
 | miniIcon      | custom mini icon                                | boolean / string | true     |
 | iconMaxSize   | maximum size of icon                            | number / string  | 24       |
 | iconShowText  | whether to show text when using large icon      | boolean          | true     |
-| zIndex        | the stack level of the directive                | number /string   | 100      |
+| zIndex        | the stack level of the directive                | number / string  | 100      |
 | background    | background color of the mask                    | string           | #fff     |
 
 ### Attribute Options
@@ -340,7 +346,7 @@ app.use(vueDefaultPage, {
 | enable        | enable the directive             | boolean                                      | true    |
 | animation     | animation                        | boolean / ('avatar' ｜ 'list')[] / Animation | true    |
 | avatarMaxSize | maximum size of avatar           | number / string                              | 54      |
-| zIndex        | the stack level of the directive | number /string                               | 100     |
+| zIndex        | the stack level of the directive | number / string                              | 100     |
 | background    | background color of the mask     | string                                       | #fff    |
 
 ### Attribute Options
@@ -403,21 +409,21 @@ You can also pass a refresh function in an array. For detailed usage, refer to [
 | textColor    | text color                                            | string           | #999               |
 | icon         | custom icon                                           | string           | —                  |
 | miniIcon     | custom mini icon                                      | boolean / string | true               |
-| iconMaxSize  | maximum size of icon                                  | number /string   | 180                |
+| iconMaxSize  | maximum size of icon                                  | number / string  | 180                |
 | iconShowText | whether to show text when using large icon            | boolean          | true               |
-| zIndex       | the stack level of the directive                      | number /string   | 100                |
+| zIndex       | the stack level of the directive                      | number / string  | 100                |
 | background   | background color of the mask                          | string           | #fff               |
 
 ### Attribute Options
 
-| Name                    | Description                                           | Type             | Default            |
-| ----------------------- | ----------------------------------------------------- | ---------------- | ------------------ |
-| vdp-error-text          | text                                                  | string           | Network Error      |
-| vdp-error-refresh-text  | refresh text (enable when refresh function is passed) | boolean / string | , Click to Refresh |
-| vdp-error-text-color    | text color                                            | string           | #999               |
-| vdp-error-icon          | custom icon                                           | string           | —                  |
-| vdp-error-mini-icon     | custom mini icon                                      | string           | —                  |
-| vdp-error-icon-max-size | maximum size of icon                                  | string           | 180                |
+| Name                    | Description                                           | Type   | Default            |
+| ----------------------- | ----------------------------------------------------- | ------ | ------------------ |
+| vdp-error-text          | text                                                  | string | Network Error      |
+| vdp-error-refresh-text  | refresh text (enable when refresh function is passed) | string | , Click to Refresh |
+| vdp-error-text-color    | text color                                            | string | #999               |
+| vdp-error-icon          | custom icon                                           | string | —                  |
+| vdp-error-mini-icon     | custom mini icon                                      | string | —                  |
+| vdp-error-icon-max-size | maximum size of icon                                  | string | 180                |
 
 ## v-empty
 
@@ -427,7 +433,7 @@ All directives will automatically adjust their height according to the container
 <!-- demo.vue -->
 
 <template>
-  <div v-empty="true" style="{height: 1000px;}"></div>
+  <div v-empty="true" style="height: 500px;"></div>
   <div v-empty="true"></div>
 </template>
 ```
@@ -440,8 +446,8 @@ The maximum icon size can be adjusted using the `iconMaxSize` or the `vdp-empty-
 <template>
   <div
     v-empty="true"
-    style="{height: 1000px;}"
-    vdp-empty-icon-max-size="500"
+    style="height: 500px;"
+    vdp-empty-icon-max-size="400"
   ></div>
 </template>
 ```
@@ -455,9 +461,9 @@ The maximum icon size can be adjusted using the `iconMaxSize` or the `vdp-empty-
 | textColor    | text color                            | string           | #999    |
 | icon         | custom icon                           | string           | —       |
 | miniIcon     | custom mini icon                      | boolean / string | true    |
-| iconMaxSize  | maximum size of icon                  | number /string   | 180     |
+| iconMaxSize  | maximum size of icon                  | number / string  | 180     |
 | iconShowText | whether to show text when using large | boolean          | true    |
-| zIndex       | the stack level of the directive      | number /string   | 100     |
+| zIndex       | the stack level of the directive      | number / string  | 100     |
 | background   | background color of the mask          | string           | #fff    |
 
 ### Attribute Options
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 4054987..488f5fb 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -2,6 +2,8 @@
 
 一个 Vue 3.0 自定义指令包插件，内置 `v-loading`，`v-skeleton`，`v-skeleton-avatar`，`v-skeleton-list`，`v-error`，`v-empty` 等指令，专注解决网络请求时等待、回显和报错等场景。
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-default-page?file=src%2FApp.vue)
+
 ## 目录
 
 - [安装](#安装)
@@ -99,6 +101,8 @@ app.use(vdpLoading);
 <!-- demo.vue -->
 
 <script setup lang="js">
+  import { ref } from 'vue';
+
   const useRun = (api) => {
     const loading = ref(false);
     const error = ref(false);
@@ -119,12 +123,14 @@ app.use(vdpLoading);
   };
 
   const data = ref([]);
-  const api = () => {
-    // 模拟请求，一般是返回 Promise 对象
-    return setTimeout(() => {
-      data.value = Array.from({ length: 10 }, (v, k) => k);
-    }, 1000);
-  };
+  // 模拟请求
+  const api = () =>
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        data.value = Array.from({ length: 10 }, (v, k) => k);
+        resolve();
+      }, 2000);
+    });
 
   const [loading, error, init] = useRun(api);
 
@@ -282,7 +288,7 @@ app.use(vueDefaultPage, {
 | miniIcon      | 自定义小图标                     | boolean / string | true     |
 | iconMaxSize   | 图标最大尺寸                     | number / string  | 24       |
 | iconShowText  | 大图标时是否显示文案             | boolean          | true     |
-| zIndex        | 指令的层叠顺序                   | number /string   | 100      |
+| zIndex        | 指令的层叠顺序                   | number / string  | 100      |
 | background    | 背景遮罩的颜色                   | string           | #fff     |
 
 ### 属性配置项
@@ -338,7 +344,7 @@ app.use(vueDefaultPage, {
 | enable        | 是否使用指令   | boolean                                      | true   |
 | animation     | 动画           | boolean / ('avatar' ｜ 'list')[] / Animation | true   |
 | avatarMaxSize | 头像最大尺寸   | number / string                              | 54     |
-| zIndex        | 指令的层叠顺序 | number /string                               | 100    |
+| zIndex        | 指令的层叠顺序 | number / string                              | 100    |
 | background    | 背景遮罩的颜色 | string                                       | #fff   |
 
 ### 属性配置项
@@ -401,21 +407,21 @@ app.use(vueDefaultPage, {
 | textColor    | 文案颜色                       | string           | #999               |
 | icon         | 自定义图标                     | string           | —                  |
 | miniIcon     | 自定义小图标                   | boolean / string | true               |
-| iconMaxSize  | 图标最大尺寸                   | number /string   | 180                |
+| iconMaxSize  | 图标最大尺寸                   | number / string  | 180                |
 | iconShowText | 大图标时是否显示文案           | boolean          | true               |
-| zIndex       | 指令的层叠顺序                 | number /string   | 100                |
+| zIndex       | 指令的层叠顺序                 | number / string  | 100                |
 | background   | 背景遮罩的颜色                 | string           | #fff               |
 
 ### 属性配置项
 
-| 名称                    | 说明                           | 类型             | 默认值             |
-| ----------------------- | ------------------------------ | ---------------- | ------------------ |
-| vdp-error-text          | 文案                           | string           | Network Error      |
-| vdp-error-refresh-text  | 刷新文案（传入刷新函数时生效） | boolean / string | , Click to Refresh |
-| vdp-error-text-color    | 文案颜色                       | string           | #999               |
-| vdp-error-icon          | 自定义图标                     | string           | —                  |
-| vdp-error-mini-icon     | 自定义小图标                   | string           | —                  |
-| vdp-error-icon-max-size | 图标最大尺寸                   | string           | 180                |
+| 名称                    | 说明                           | 类型   | 默认值             |
+| ----------------------- | ------------------------------ | ------ | ------------------ |
+| vdp-error-text          | 文案                           | string | Network Error      |
+| vdp-error-refresh-text  | 刷新文案（传入刷新函数时生效） | string | , Click to Refresh |
+| vdp-error-text-color    | 文案颜色                       | string | #999               |
+| vdp-error-icon          | 自定义图标                     | string | —                  |
+| vdp-error-mini-icon     | 自定义小图标                   | string | —                  |
+| vdp-error-icon-max-size | 图标最大尺寸                   | string | 180                |
 
 ## v-empty
 
@@ -425,7 +431,7 @@ app.use(vueDefaultPage, {
 <!-- demo.vue -->
 
 <template>
-  <div v-empty="true" style="{height: 1000px;}"></div>
+  <div v-empty="true" style="height: 500px;"></div>
   <div v-empty="true"></div>
 </template>
 ```
@@ -438,8 +444,8 @@ app.use(vueDefaultPage, {
 <template>
   <div
     v-empty="true"
-    style="{height: 1000px;}"
-    vdp-empty-icon-max-size="500"
+    style="height: 500px;"
+    vdp-empty-icon-max-size="400"
   ></div>
 </template>
 ```
@@ -453,9 +459,9 @@ app.use(vueDefaultPage, {
 | textColor    | 文案颜色             | string           | #999    |
 | icon         | 自定义图标           | string           | —       |
 | miniIcon     | 自定义小图标         | boolean / string | true    |
-| iconMaxSize  | 图标最大尺寸         | number /string   | 180     |
+| iconMaxSize  | 图标最大尺寸         | number / string  | 180     |
 | iconShowText | 大图标时是否显示文案 | boolean          | true    |
-| zIndex       | 指令的层叠顺序       | number /string   | 100     |
+| zIndex       | 指令的层叠顺序       | number / string  | 100     |
 | background   | 背景遮罩的颜色       | string           | #fff    |
 
 ### 属性配置项
diff --git a/package.json b/package.json
index 5a17bc5..fa78a22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-default-page",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue 3.0 custom directives plugin",
   "keywords": [
     "vue",
@@ -25,14 +25,15 @@
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
+  "style": "dist/style.css",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "types": "./dist/types/index.d.ts"
     },
     "./index.css": "./dist/style.css"
   },
-  "style": "dist/style.css",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -62,6 +63,7 @@
       "stylelint"
     ]
   },
+  "packageManager": "pnpm@8.14.1",
   "peerDependencies": {
     "vue": "^3.3.0"
   },