diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 3a9ed92..26f9193 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Install dependencies
-        run: pnpm i --no-frozen-lockfile && pnpm run build # or pnpm install / yarn install / bun install
+        run: pnpm i --no-frozen-lockfile # or pnpm install / yarn install / bun install
       - name: Build with VitePress
         run: |
           pnpm docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index 6f3d7ad..e7605fb 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -20,7 +20,7 @@ jobs:
         with:
           version: 8
       - run: pnpm i
-      - run: pnpm run build
+      - run: pnpm run build:comp
 
   publish-npm:
     needs: build
diff --git a/.markdownlint.json b/.markdownlint.json
index 33651ad..42d8fd2 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -71,7 +71,8 @@
       "ivy-tip",
       "ivy-tour-step",
       "ivy-tour",
-      "ivy-card"
+      "ivy-card",
+      "ivy-textarea"
     ]
   }
 }
diff --git a/packages/docs/src/.vitepress/config/sidebar.js b/packages/docs/src/.vitepress/config/sidebar.js
index 405e525..15194fb 100644
--- a/packages/docs/src/.vitepress/config/sidebar.js
+++ b/packages/docs/src/.vitepress/config/sidebar.js
@@ -2,276 +2,92 @@ const guide = [
   {
     text: "基础",
     items: [
-      {
-        text: "快速开始",
-        link: "/guide/index",
-        items: [],
-      },
-      {
-        text: "Color 色彩",
-        link: "/guide/color",
-        items: [],
-      },
-      {
-        text: "theme 主题",
-        link: "/guide/theme",
-        items: [],
-      },
+      { text: "快速开始", link: "/guide/index", items: [] },
+      { text: "Color 色彩", link: "/guide/color", items: [] },
+      { text: "theme 主题", link: "/guide/theme", items: [] },
     ],
   },
 ];
 
 const basic = [
-  {
-    text: "AspectRatio 比例容器",
-    link: "/components/aspect-ratio",
-  },
-  {
-    text: "Button 按钮",
-    link: "/components/button",
-  },
-  {
-    text: "Divider 分割线",
-    link: "/components/divider",
-  },
-  {
-    text: "Icon 图标",
-    link: "/components/icon",
-  },
-  {
-    text: "Space 间距",
-    link: "/components/space",
-  },
-  {
-    text: "Grid 宫格布局",
-    link: "/components/grid-layout.md",
-  },
-  {
-    text: "Row/Col 栅格",
-    link: "/components/grid",
-  },
-  {
-    text: "Split 分割面板",
-    link: "/components/split",
-  },
-  {
-    text: "Scrollbar 滚动条",
-    link: "/components/scrollbar",
-  },
-  {
-    text: "Link 链接",
-    link: "/components/link",
-  },
-  {
-    text: "Text 文字",
-    link: "/components/text",
-  },
+  { text: "AspectRatio 比例容器", link: "/components/aspect-ratio" },
+  { text: "Button 按钮", link: "/components/button" },
+  { text: "Divider 分割线", link: "/components/divider" },
+  { text: "Icon 图标", link: "/components/icon" },
+  { text: "Space 间距", link: "/components/space" },
+  { text: "Grid 宫格布局", link: "/components/grid-layout.md" },
+  { text: "Row/Col 栅格", link: "/components/grid" },
+  { text: "Split 分割面板", link: "/components/split" },
+  { text: "Scrollbar 滚动条", link: "/components/scrollbar" },
+  { text: "Link 链接", link: "/components/link" },
+  { text: "Text 文字", link: "/components/text" },
+];
+
+const form = [
+  { text: "Checkbox 多选框", link: "/components/checkbox" },
+  { text: "DatePicker 日期选择", link: "/components/date-picker" },
+  { text: "Input 输入框", link: "/components/input" },
+  { text: "Radio 单选框", link: "/components/radio" },
+  { text: "Rate 评分", link: "/components/rate" },
+  { text: "Select 选择框", link: "/components/select" },
+  { text: "Switch 开关", link: "/components/switch" },
+  // { text: "Textarea 文本域", link: "/components/textarea" },
+  { text: "TimePicker 时间选择器", link: "/components/time-picker" },
+  { text: "TimeSelect 时间选择", link: "/components/time-select" },
+];
+
+const data = [
+  { text: "Avatar 头像", link: "/components/avatar" },
+  { text: "Description 描述列表", link: "/components/description" },
+  { text: "Badge 徽标", link: "/components/badge" },
+  { text: "Card 卡片", link: "/components/card" },
+  { text: "Carousel 轮播图", link: "/components/carousel" },
+  { text: "Circle 环形进度条", link: "/components/circle" },
+  { text: "Collapse 折叠面板", link: "/components/collapse" },
+  { text: "Empty 空状态", link: "/components/empty" },
+  { text: "Image 图片", link: "/components/image" },
+  { text: "Pagination 分页", link: "/components/pagination" },
+  { text: "Progress 进度条", link: "/components/progress" },
+  { text: "Table 表格", link: "/components/table" },
+  { text: "Tag 标签", link: "/components/tag" },
+  { text: "Tour 漫游式引导", link: "/components/tour" },
+  { text: "Timeline 时间线", link: "/components/timeline" },
+  { text: "Tree 树形控件", link: "/components/tree" },
+];
+
+const notify = [
+  { text: "Dialog 对话框", link: "/components/dialog" },
+  { text: "Drawer 抽屉", link: "/components/drawer" },
+  { text: "Loading 加载", link: "/components/loading" },
+  { text: "Message 消息提示", link: "/components/message" },
+  { text: "MessageBox 消息弹出框", link: "/components/message-box" },
+  { text: "Notification 通知框", link: "/components/notification" },
+  { text: "Result 结果", link: "/components/result" },
+  { text: "Tip 提示信息", link: "/components/tip" },
+  { text: "Tooltip 文字提示", link: "/components/tooltip" },
+];
+
+const navigation = [
+  { text: "Affix 固钉", link: "/components/affix" },
+  { text: "Breadcrumb 面包屑", link: "/components/breadcrumb" },
+  { text: "Dropdown 下拉菜单", link: "/components/dropdown" },
+  { text: "Steps 步骤条", link: "/components/steps" },
+  { text: "Tabs 标签页", link: "/components/tab" },
+];
+
+const other = [
+  { text: "Clipboard 复制到剪切板", link: "/components/clipboard" },
+  { text: "ContextMenu 右键菜单", link: "/components/contextmenu" },
+  { text: "Details 详情", link: "/components/details" },
 ];
 
 const components = [
-  {
-    text: "基础/布局",
-    collapsed: false,
-    items: basic,
-  },
-  {
-    text: "表单",
-    collapsed: false,
-    items: [
-      {
-        text: "Checkbox 多选框",
-        link: "/components/checkbox",
-      },
-      {
-        text: "DatePicker 日期选择",
-        link: "/components/date-picker",
-      },
-      {
-        text: "Input 输入框",
-        link: "/components/input",
-      },
-      {
-        text: "Radio 单选框",
-        link: "/components/radio",
-      },
-      {
-        text: "Rate 评分",
-        link: "/components/rate",
-      },
-      {
-        text: "Select 选择框",
-        link: "/components/select",
-      },
-      {
-        text: "Switch 开关",
-        link: "/components/switch",
-      },
-      {
-        text: "TimePicker 时间选择器",
-        link: "/components/time-picker",
-      },
-      {
-        text: "TimeSelect 时间选择",
-        link: "/components/time-select",
-      },
-    ],
-  },
-  {
-    text: "数据展示",
-    collapsed: false,
-    items: [
-      {
-        text: "Avatar 头像",
-        link: "/components/avatar",
-      },
-      {
-        text: "Description 描述列表",
-        link: "/components/description",
-      },
-      {
-        text: "Badge 徽标",
-        link: "/components/badge",
-      },
-      {
-        text: "Card 卡片",
-        link: "/components/card",
-      },
-      {
-        text: "Carousel 轮播图",
-        link: "/components/carousel",
-      },
-      {
-        text: "Circle 环形进度条",
-        link: "/components/circle",
-      },
-      {
-        text: "Collapse 折叠面板",
-        link: "/components/collapse",
-      },
-      {
-        text: "Empty 空状态",
-        link: "/components/empty",
-      },
-      {
-        text: "Image 图片",
-        link: "/components/image",
-      },
-      {
-        text: "Pagination 分页",
-        link: "/components/pagination",
-      },
-      {
-        text: "Progress 进度条",
-        link: "/components/progress",
-      },
-      {
-        text: "Table 表格",
-        link: "/components/table",
-      },
-      {
-        text: "Tag 标签",
-        link: "/components/tag",
-      },
-      {
-        text: "Tour 漫游式引导",
-        link: "/components/tour",
-      },
-      {
-        text: "Timeline 时间线",
-        link: "/components/timeline",
-      },
-      {
-        text: "Tree 树形控件",
-        link: "/components/tree",
-      },
-    ],
-  },
-  {
-    text: "通知/反馈",
-    collapsed: false,
-    items: [
-      {
-        text: "Dialog 对话框",
-        link: "/components/dialog",
-      },
-      {
-        text: "Drawer 抽屉",
-        link: "/components/drawer",
-      },
-      {
-        text: "Loading 加载",
-        link: "/components/loading",
-      },
-      {
-        text: "Message 消息提示",
-        link: "/components/message",
-      },
-      {
-        text: "MessageBox 消息弹出框",
-        link: "/components/message-box",
-      },
-      {
-        text: "Notification 通知框",
-        link: "/components/notification",
-      },
-      {
-        text: "Result 结果",
-        link: "/components/result",
-      },
-      {
-        text: "Tip 提示信息",
-        link: "/components/tip",
-      },
-      {
-        text: "Tooltip 文字提示",
-        link: "/components/tooltip",
-      },
-    ],
-  },
-  {
-    text: "导航",
-    collapsed: false,
-    items: [
-      {
-        text: "Affix 固钉",
-        link: "/components/affix",
-      },
-      {
-        text: "Breadcrumb 面包屑",
-        link: "/components/breadcrumb",
-      },
-      {
-        text: "Dropdown 下拉菜单",
-        link: "/components/dropdown",
-      },
-      {
-        text: "Steps 步骤条",
-        link: "/components/steps",
-      },
-      {
-        text: "Tabs 标签页",
-        link: "/components/tab",
-      },
-    ],
-  },
-  {
-    text: "其它",
-    collapsed: false,
-    items: [
-      {
-        text: "Clipboard 复制到剪切板",
-        link: "/components/clipboard",
-      },
-      {
-        text: "ContextMenu 右键菜单",
-        link: "/components/contextmenu",
-      },
-      {
-        text: "Details 详情",
-        link: "/components/details",
-      },
-    ],
-  },
+  { text: "基础/布局", collapsed: false, items: basic },
+  { text: "表单", collapsed: false, items: form },
+  { text: "数据展示", collapsed: false, items: data },
+  { text: "通知/反馈", collapsed: false, items: notify },
+  { text: "导航", collapsed: false, items: navigation },
+  { text: "其它", collapsed: false, items: other },
 ];
 
 const sidebar = {
diff --git a/packages/docs/src/changelog.md b/packages/docs/src/changelog.md
index 125f5c2..17303ff 100644
--- a/packages/docs/src/changelog.md
+++ b/packages/docs/src/changelog.md
@@ -1,5 +1,20 @@
 # 更新日志
 
+## v1.7.1 版本
+
+Feats：
+
+- `Icon` 组件增加 `spin` 属性
+
+Docs：
+
+- 优化文档首页
+- `Icon` 组件文档增加图标来源
+
+Fixed：
+
+- 修复文档打包失败
+
 ## v1.7.0 版本
 
 Feats：
diff --git a/packages/docs/src/components/icon.md b/packages/docs/src/components/icon.md
index 117147c..3e20cf7 100644
--- a/packages/docs/src/components/icon.md
+++ b/packages/docs/src/components/icon.md
@@ -1,5 +1,9 @@
 # Icon 图标
 
+:::tip 注意
+图标来自 [element-plus/element-plus-icons](https://github.com/element-plus/element-plus-icons)
+:::
+
 ## 基础用法
 
 通过 `name` 来设置不同的图标
diff --git a/packages/docs/src/components/textarea.md b/packages/docs/src/components/textarea.md
new file mode 100644
index 0000000..7575a16
--- /dev/null
+++ b/packages/docs/src/components/textarea.md
@@ -0,0 +1,53 @@
+# Textarea 文本域
+
+## 基础用法
+
+<ivy-textarea placeholder="请输入" maxlength="200"></ivy-textarea>
+
+```html
+<ivy-textarea placeholder="请输入"></ivy-textarea>
+```
+
+## 只读
+
+<ivy-textarea placeholder="请输入" readonly></ivy-textarea>
+
+```html
+<ivy-textarea placeholder="请输入" readonly></ivy-textarea>
+```
+
+## 禁用
+
+<ivy-textarea placeholder="请输入" disabled></ivy-textarea>
+
+```html
+<ivy-textarea placeholder="请输入" disabled></ivy-textarea>
+```
+
+## 显示字数统计
+
+<ivy-textarea placeholder="请输入" maxlength="200" show-word-limit></ivy-textarea>
+
+```html
+<ivy-textarea
+  placeholder="请输入"
+  maxlength="200"
+  show-word-limit
+></ivy-textarea>
+```
+
+## Props
+
+| Prop            | 描述            | 类型      | 可选值      | 默认值  |
+| --------------- | --------------- | --------- | ----------- | ------- |
+| placeholder     | 提示语          | `string`  | -           | -       |
+| readonly        | 只读            | `boolean` | -           | `false` |
+| disabled        | 是否禁用        | `boolean` | -           | `false` |
+| show-word-limit | 字数统计        | `boolean` | -           | `false` |
+| maxlength       | 最大长度        | `number`  | -           | -       |
+| minlength       | 最小长度        | `number`  | -           | -       |
+| autocomplete    | 自动填充        | `string`  | -           | -       |
+| spellcheck      | 原生 spellcheck | `string`  | -           | `auto`  |
+| wrap            | 原生 wrap       | `string`  | `hard/soft` | `soft`  |
+| rows            | 行数            | `number`  | -           | -       |
+| cols            | 列数            | `number`  | -           | -       |
diff --git a/packages/docs/src/index.md b/packages/docs/src/index.md
index 6d10915..47d4c1b 100644
--- a/packages/docs/src/index.md
+++ b/packages/docs/src/index.md
@@ -4,7 +4,8 @@ layout: home
 
 hero:
   name: "ivy-design"
-  tagline: "使用 vue3 开发的web component组件库"
+  text: Web Component
+  tagline: "由 Vite 和 Vue 驱动的面向未来的原生组件库"
   actions:
     - theme: brand
       text: 快速开始
diff --git a/packages/ivy-design-wc/package.json b/packages/ivy-design-wc/package.json
index b6fe549..78eb787 100644
--- a/packages/ivy-design-wc/package.json
+++ b/packages/ivy-design-wc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ivy-design/ce",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "private": false,
     "type": "module",
     "main": "dist/ivy-design.js",
diff --git a/packages/ivy-design-wc/src/components/icon/index.vue b/packages/ivy-design-wc/src/components/icon/index.vue
index 5e31fa6..9cd01dc 100644
--- a/packages/ivy-design-wc/src/components/icon/index.vue
+++ b/packages/ivy-design-wc/src/components/icon/index.vue
@@ -49,7 +49,7 @@ onMounted(() => {
     font-size: inherit;
 }
 
-:host([spin]) .ivy-icon {
+:host([spin]) {
     animation: spin 1.8s linear infinite;
 }
 
diff --git a/packages/ivy-design-wc/src/components/textarea/index.ts b/packages/ivy-design-wc/src/components/textarea/index.ts
new file mode 100644
index 0000000..e724b15
--- /dev/null
+++ b/packages/ivy-design-wc/src/components/textarea/index.ts
@@ -0,0 +1,14 @@
+import { defineCustomElement } from 'vue'
+import { install } from '@/utils/index'
+import comp from './src/index.vue'
+
+const Textarea = defineCustomElement(comp)
+
+const registerComponent = (prefix = 'Ivy') => {
+    const key = `${prefix}${comp.name}`
+    install(key, comp)
+}
+
+export { Textarea, registerComponent as registerTextareaComponent }
+
+export default registerComponent
diff --git a/packages/ivy-design-wc/src/components/textarea/src/index.vue b/packages/ivy-design-wc/src/components/textarea/src/index.vue
new file mode 100644
index 0000000..09ef9d2
--- /dev/null
+++ b/packages/ivy-design-wc/src/components/textarea/src/index.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+
+defineOptions({
+    name: 'Textarea',
+    inheritAttrs: false
+})
+
+interface Props {
+    placeholder: string
+    disabled: boolean
+    readonly: boolean
+    rows: number
+    resize: 'none' | 'both' | 'horizontal' | 'vertical'
+    maxlength: number
+    showWordLimit: boolean
+    wrap: 'hard' | 'soft'
+    cols: number
+    autocomplete: 'on' | 'off'
+    autofocus: boolean
+    minlength: number
+    name: string
+    required: boolean
+    spellcheck: boolean | 'auto'
+}
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false,
+    rows: 3,
+    resize: 'vertical',
+    disabled: false,
+    showWordLimit: false,
+    wrap: 'soft',
+    spellcheck: 'auto',
+    autocomplete: 'off'
+})
+
+const attrs = computed<Record<string, any>>(() => {
+    return {
+        readonly: props.readonly,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        rows: props.rows,
+        wrap: props.wrap,
+        spellcheck: props.spellcheck,
+        autocomplete: props.autocomplete,
+        autofocus: props.autofocus,
+        minlength: props.minlength,
+        name: props.name,
+        required: props.required
+    }
+})
+
+const styles = computed(() => {
+    return {
+        resize: props.resize
+    }
+})
+
+const curLength = ref(0)
+const handlerChange = (e: Event) => {
+    const target = e.target as HTMLTextAreaElement
+    curLength.value = target.value.length
+}
+</script>
+
+<template>
+    <textarea
+        class="input-inner"
+        v-bind="attrs"
+        :style="styles"
+        @keypress="handlerChange"
+        @compositionend="handlerChange"
+    ></textarea>
+    <span v-if="props.showWordLimit" class="input-count">
+        {{ `${curLength}/${maxlength || 0}` }}
+    </span>
+</template>
+
+<style lang="scss">
+:host {
+    --ivy-textarea-border-radius: var(--ivy-border-radius, 4px);
+    --ivy-textarea-placeholder-color: #c0c4cc;
+    --ivy-textarea-border-color: var(--ivy-border-color, #dcdfe6);
+    --ivy-textarea-border-color-hover: var(--ivy-color-primary, #409eff);
+    --ivy-textarea-color: var(--ivy-text-color-regular, #606266);
+    --ivy-textarea-font-size: var(--ivy-font-size, 14px);
+    display: block;
+    position: relative;
+    border-radius: var(--ivy-textarea-border-radius);
+    font-size: inherit;
+    font-family: inherit;
+}
+.input-inner {
+    background-color: #fff;
+    background-image: none;
+    border-radius: var(--ivy-textarea-border-radius);
+    border: 1px solid var(--ivy-textarea-border-color);
+    box-sizing: border-box;
+    color: var(--ivy-textarea-color);
+    font-size: var(--ivy-textarea-font-size);
+    line-height: 1.5em;
+    outline: none;
+    padding: 8px;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    width: 100%;
+    display: block;
+    font-size: inherit;
+    font-family: inherit;
+}
+.input-inner::input-placeholder,
+.input-inner::-webkit-input-placeholder,
+.input-inner::-moz-input-placeholder,
+.input-inner:-moz-input-placeholder,
+.input-inner:-ms-input-placeholder {
+    color: var(--ivy-textarea-placeholder-color);
+    font-size: 14px;
+}
+
+.input-inner:active,
+.input-inner:hover,
+.input-inner:focus {
+    border-color: var(--ivy-textarea-border-color-hover);
+    & + .input-icon-close {
+        display: inline-flex;
+    }
+}
+
+:host([disabled]) {
+    cursor: not-allowed;
+}
+:host([disabled]) .input-inner {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed;
+}
+:host([readonly]) {
+    cursor: not-allowed;
+}
+.input-count {
+    color: var(--ivy-color-info);
+    background: var(--ivy-fill-color-blank);
+    position: absolute;
+    font-size: 12px;
+    line-height: 14px;
+    bottom: 5px;
+    right: 10px;
+}
+</style>
diff --git a/packages/ivy-design-wc/src/index.ts b/packages/ivy-design-wc/src/index.ts
index 0fa4c74..39262f4 100644
--- a/packages/ivy-design-wc/src/index.ts
+++ b/packages/ivy-design-wc/src/index.ts
@@ -69,6 +69,7 @@ import { TimePicker } from './components/time-picker/index'
 import { Split } from './components/split/index'
 import { Notification, notify } from './components/notification/index'
 import { Tour, createTour } from './components/tour/index'
+import { Textarea } from './components/textarea/index'
 
 const comp: Record<string, CustomElementConstructor> = {
     Button,
@@ -138,7 +139,8 @@ const comp: Record<string, CustomElementConstructor> = {
     TimePicker,
     Split,
     Notification,
-    Tour
+    Tour,
+    Textarea
 }
 
 const registerComponents = async (prefix = 'Ivy') => {
@@ -246,5 +248,6 @@ declare module 'vue' {
         Split: typeof comp.Split
         Notification: typeof comp.Notification
         Tour: typeof comp.Tour
+        Textarea: typeof comp.Textarea
     }
 }