diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 651a3ce400bdd57f63cfda529fb679c679668642..973cccfda0735ccae55ef5fd78299b41fad022f2 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -106,6 +106,10 @@ const emits = defineEmits<{
 const currentValue = ref<number | string | undefined>(props.modelValue ?? props.defaultValue);
 const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
 
+let numberValue = getRealValue(currentValue.value);
+let lastNumberValue = numberValue;
+let lastInputValue = currentValue.value;
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -115,13 +119,13 @@ watch(
     } else {
       currentValue.value = val;
     }
+    numberValue = getRealValue(currentValue.value);
+    lastNumberValue = numberValue;
+    lastInputValue = currentValue.value;
     // console.log('watch', val);
   }
 );
 
-let numberValue = getRealValue(currentValue.value);
-let lastNumberValue = numberValue;
-
 const canAdd = computed(() => {
   if (props.disabled) {
     return false;
@@ -159,7 +163,9 @@ const updateValue = (val: string) => {
 
   if (numberValue !== lastNumberValue) {
     emits('change', numberValue);
-  } else {
+  }
+
+  if (val !== lastInputValue) {
     if (isFunction(props.format)) {
       currentValue.value = props.format(numberValue);
     } else {
@@ -169,6 +175,7 @@ const updateValue = (val: string) => {
   }
 
   lastNumberValue = numberValue;
+  lastInputValue = currentValue.value;
   return numberValue;
 };
 
@@ -177,7 +184,7 @@ const onInput = (val: string, evt: Event) => {
 };
 
 const onFocus = (val: string, evt: FocusEvent) => {
-  lastNumberValue = numberValue;
+  // lastNumberValue = numberValue;
   emits('focus', numberValue, evt);
   // console.log('focus', numberValue);
 };
@@ -251,7 +258,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     <template v-if="['both', 'left'].includes(props.controls)" #prepend>
       <div
         v-if="props.controls === 'both'"
-        class="o-input-number-btn prepend"
+        class="o-input-number-btn both-left"
         :class="{
           'is-disabled': !canMinus,
         }"
@@ -283,7 +290,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     <template v-if="['both', 'right'].includes(props.controls)" #append>
       <div
         v-if="props.controls === 'both'"
-        class="o-input-number-btn append"
+        class="o-input-number-btn both-right"
         :class="{
           'is-disabled': !canAdd,
         }"
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
index 3d24dcf47415fbcbf39969c4a6ddf59cb3a31539..a863fa6096c3c4af5a7b409673c8e9dfa4e23b9a 100644
--- a/packages/opendesign/src/components/input-number/input-number.ts
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -44,6 +44,7 @@ export function correctValue(val: string | number, lastVal: number, min?: number
     } if (!isUndefined(min) && v < min) {
       return min;
     }
+    return v;
   }
   return lastVal;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index b980678972416f1378538ca120d7c3461431470c..666fea56a30e27fce31360a3989a70a312f5b1c5 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -9,13 +9,6 @@
     overflow: hidden;
   }
 
-  // &.is-disabled {
-  //   .o-input-prepend,
-  //   .o-input-append {
-  //     background-color: var(--input-number-btn-bg-disabled);
-  //     color: var(--input-number-btn-color-disabled);
-  //   }
-  // }
   &.is-invalid {
     .o-input-input {
       text-decoration: line-through;
@@ -32,21 +25,24 @@
   flex-wrap: wrap;
   color: var(--input-number-btn-color);
 
-  &:not(.is-vertical):hover {
-    color: var(--input-number-btn-color-hover);
-    background-color: var(--input-number-btn-bg);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    background-color: var(--input-number-btn-bg-disabled);
-    color: var(--input-number-btn-color-disabled);
+  &.both-left,
+  &.both-right {
+    &:hover {
+      color: var(--input-number-btn-color-hover);
+      background-color: var(--input-number-btn-bg);
+    }
+    &.is-disabled {
+      cursor: not-allowed;
+      background-color: var(--input-number-btn-bg-disabled);
+      color: var(--input-number-btn-color-disabled);
+    }
   }
 
   .o-input-shape-round & {
-    &.append {
+    &.both-right {
       padding-right: 2px;
     }
-    &.prepend {
+    &.both-left {
       padding-left: 2px;
     }
   }
@@ -65,6 +61,11 @@
     color: var(--input-number-btn-color-hover);
     background-color: var(--input-number-btn-bg);
   }
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-number-btn-bg-disabled);
+    color: var(--input-number-btn-color-disabled);
+  }
 }
 .o-input-number-icon-minus {
   position: absolute;
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index fd37793b90839f6e2689b7358891520d58e5051a..9a2d7f9a6dfd0b497a92c921116a7b0d52c8b33a 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -6,6 +6,7 @@ import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
 import { toInputString } from './input';
+import { OResizeObserver } from '../resize-observer';
 
 interface InputPropT {
   /**
@@ -46,10 +47,14 @@ interface InputPropT {
    * 是否可以清除
    */
   clearable?: boolean;
+  /**
+   * 是否自动增加宽度
+   */
+  autoWidth?: boolean;
   /**
    * 是否是密码输入
    */
-  type?: 'text' | 'password' | 'textarea';
+  type?: 'text' | 'password';
   /**
    * 解析输入框的值
    */
@@ -84,14 +89,18 @@ const emits = defineEmits<{
 }>();
 
 const inputRef = ref<HTMLElement | null>(null);
+const inputWidth = ref();
 // 数字输入框当前值
 const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 当前input文本值
+const inputText = ref(realValue.value);
 // 监听属性变化，刷新值
 watch(
   () => props.modelValue,
   (val) => {
     // console.log('watch', val);
     realValue.value = toInputString(val);
+    inputText.value = realValue.value;
   }
 );
 
@@ -102,10 +111,6 @@ const displayValue = computed(() => {
   return v;
 });
 
-// 输入框状态
-const status = ref<undefined | 'warning' | 'warn' | 'error'>();
-const statusClass = computed(() => (status.value || props.status ? `is-${status.value || props.status}` : ''));
-
 // 是否聚焦状态
 const isFocus = ref(false);
 let lastValue: string = realValue.value;
@@ -147,6 +152,8 @@ const onInput = (e: Event) => {
   emits('input', val, e);
   // console.log('input', val);
 
+  inputText.value = val;
+
   if (!props.parse) {
     emits('update:modelValue', val);
     // console.log('update:modelValue', val);
@@ -196,15 +203,18 @@ const onMouseDown = (e: MouseEvent) => {
     clickInside = true;
   }
 };
+
+const onMirrorResize = (en: ResizeObserverEntry) => {
+  inputWidth.value = en.target.clientWidth;
+};
 </script>
 <template>
   <label
     class="o-input"
     :class="[
-      statusClass,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
-      `o-input-status-${props.status}`,
+      props.status ? `o-input-status-${props.status}` : '',
       {
         'o-input-disabled': props.disabled,
         'o-input-focus': isFocus,
@@ -228,21 +238,32 @@ const onMouseDown = (e: MouseEvent) => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <input
-        ref="inputRef"
-        :value="displayValue"
-        :type="type"
-        :placeholder="props.placeholder"
-        class="o-input-input"
-        :readonly="props.readonly"
-        :disabled="props.disabled"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @keydown="onKeyDown"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      />
+      <div class="o-input-auto-wrap">
+        <input
+          ref="inputRef"
+          :value="displayValue"
+          :type="type"
+          :placeholder="props.placeholder"
+          class="o-input-input"
+          :class="{
+            'is-auto-size': props.autoWidth,
+          }"
+          :style="{
+            width: inputWidth + 'px',
+          }"
+          :readonly="props.readonly"
+          :disabled="props.disabled"
+          @focus="onFocus"
+          @blur="onBlur"
+          @input="onInput"
+          @keydown="onKeyDown"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+        />
+        <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
+          <div class="o-input-mirror">{{ inputText }}</div>
+        </OResizeObserver>
+      </div>
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index 288cd57d1a02d402ecae816d3d93065b2b634866..d9f6fe6da12ecad011379ff4e6b869e9efd7f91d 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -6,6 +6,7 @@ import InputBasic from './InputBasic.vue';
 import InputEvent from './InputEvent.vue';
 import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
+import InputAutoWidth from './InputAutoWidth.vue';
 </script>
 <template>
   <div class="page-demo">
@@ -13,6 +14,7 @@ import InputMethod from './InputMethod.vue';
     <InputEvent />
     <InputSlot />
     <InputMethod />
+    <InputAutoWidth />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ebb62b940b99ceb08860809dc6db52cb34b5846e
--- /dev/null
+++ b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val1 = ref('max width: 300px');
+const val2 = ref('min width: 100px');
+setTimeout(() => {
+  val1.value = '123';
+}, 2000);
+</script>
+<template>
+  <h4>Auto Width</h4>
+  <section>
+    <div>
+      max-width: 300px:
+      <OInput v-model="val1" auto-width style="max-width: 300px" />
+    </div>
+    <div>
+      min-width: 200px:
+      <OInput v-model="val2" auto-width style="min-width: 200px" />
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts
index 7c05e51f294e2438fa0736281a17ceaaf7a7fbe0..e21489896f2623584380b61ba9e26e7d313968df 100644
--- a/packages/opendesign/src/components/input/input.ts
+++ b/packages/opendesign/src/components/input/input.ts
@@ -5,4 +5,4 @@ export function toInputString(val: unknown): string {
     return '';
   }
   return String(val);
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/input/provide.ts b/packages/opendesign/src/components/input/provide.ts
deleted file mode 100644
index dadbbb51f7d3fb4fb5a0ad72533a53547c03e27c..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/input/provide.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { InjectionKey } from 'vue';
-
-export const tabsInjectKey: InjectionKey<{
-  validator: (value: string | number) => boolean
-}> = Symbol('provide-form-item');
-
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index c37f0eaaf80f09706430534c2d75ffa21999d26d..3a970d9ff3238599e1a5996840f92e48ed09d208 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -15,7 +15,9 @@
   border-radius: var(--input-radius);
   border: 1px solid var(--input-border);
   background-color: var(--input-bg);
-
+  width: 100%;
+  overflow: hidden;
+  position: relative;
   &:hover {
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
@@ -35,32 +37,6 @@
   }
 }
 
-.o-input-disabled {
-  .o-input-clear {
-    display: none;
-  }
-  .o-input-wrap {
-    color: var(--input-color-disabled);
-    cursor: not-allowed;
-    border-color: var(--input-border-disabled);
-    background-color: var(--input-bg-disabled);
-  }
-}
-
-.o-input-clearable {
-  &:hover {
-    .o-input-suffix-wrap {
-      visibility: hidden;
-      opacity: 0;
-    }
-    .o-input-clear {
-      visibility: visible;
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
 .o-input-input {
   outline: none;
   border: none;
@@ -68,10 +44,12 @@
   cursor: inherit;
   background-color: transparent;
   display: inline-flex;
-  width: 100%;
   caret-color: var(--o-color-primary1);
-  padding: 4px 0;
+  padding: 0;
   line-height: inherit;
+  height: 100%;
+  width: 100%;
+  font-size: inherit;
 }
 
 .o-input-clear {
@@ -83,20 +61,50 @@
   align-items: center;
   justify-content: center;
   color: var(--input-icon-color);
+  background-color: var(--input-icon-bg);
+  border-radius: 50%;
+
   &:hover {
     color: var(--input-icon-color-hover);
   }
   .o-input-suffix-wrap + & {
     position: absolute;
     right: 0;
-    height: 100%;
   }
 }
+
+.o-input-disabled {
+  .o-input-clear {
+    display: none;
+  }
+  .o-input-wrap {
+    color: var(--input-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--input-border-disabled);
+    background-color: var(--input-bg-disabled);
+  }
+}
+
+.o-input-clearable {
+  &:hover {
+    .o-input-suffix-wrap {
+      visibility: hidden;
+      opacity: 0;
+    }
+    .o-input-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
 .o-input-suffix-wrap {
   transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out);
 }
 .o-input-suffix {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   position: relative;
   margin-left: 4px;
@@ -126,6 +134,22 @@
   border-bottom-right-radius: var(--input-append-prepend-border-radius);
 }
 
+.o-input-auto-wrap {
+  position: relative;
+}
+.o-input-mirror {
+  white-space: pre;
+  line-height: inherit;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  visibility: hidden;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  pointer-events: none;
+}
+
 .o-input-prepend {
   border: 1px solid var(--o-color-border2);
   border-right: 0;
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index 04db1135586688f517d1da0d789ad4977fb7e45e..b32fc21ee802b05449561529bc9d54c4039c73fe 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -29,6 +29,7 @@
 
   --input-icon-color: var(--o-color-text3);
   --input-icon-color-hover: var(--o-color-primary1);
+  --input-icon-bg: var(--o-color-bg4);
 
   --input-border-success: var(--o-color-success1);
   --input-border-success-hover: var(--o-color-success2);
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 714d57024695768d299955c9815279e293d0961f..6d626850de9280e0e268c8fc35a19ea248ef8234 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, nextTick, watch } from 'vue';
 import { getPagerItem, PagerItemT, getSizeOptions } from './pagination';
 import { OPopover } from '../popover';
 import { OInputNumber } from '../input-number';
@@ -61,6 +61,12 @@ const defaultSizeLabel = currentPageSize.value + Labels.sizeLabel;
 const totalPage = computed(() => Math.ceil(props.total / currentPageSize.value));
 
 const pages = ref(getPagerItem(totalPage.value, currentPage.value, props.showPageCount));
+watch(
+  () => totalPage.value,
+  () => {
+    pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
+  }
+);
 
 const updateCurrentPage = (page: number) => {
   if (isNaN(page)) {
@@ -103,17 +109,44 @@ const moreClick = (more: PagerItemT[0]) => {
 const goToChange = (val: string | number) => {
   updateCurrentPage(Number(val));
 };
+
+const pageSizeChange = (val: string | number) => {
+  // updateCurrentPage(Number(val));
+  const currentIndex = currentPageSize.value * currentPage.value;
+  currentPageSize.value = Number(val);
+  nextTick(() => {
+    currentPage.value = Math.ceil(currentIndex / currentPageSize.value);
+    console.log(currentIndex, totalPage.value, currentPage.value, currentPageSize.value);
+
+    pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
+  });
+};
 </script>
 <template>
   <div class="o-pagination">
     <div class="o-pagination-wrap">
       <div class="o-pagination-total">{{ Labels.total }}&nbsp;{{ props.total }}</div>
+      <template v-if="!props.simple">
+        <div class="o-pagination-size">
+          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel" @change="pageSizeChange">
+            <OOption v-for="item in pageSizeList" :key="item.value" :label="item.label" :value="item.value" />
+          </OSelect>
+        </div>
+      </template>
       <div class="o-pagination-pager">
         <div class="o-pagination-prev" :class="{ disabled: currentPage === 1 }" @click="() => currentPage !== 1 && clickPageBtn(false)">&lt;</div>
         <div class="o-pagination-pages">
           <template v-if="props.simple">
             <div class="o-pagination-simple">
-              <OInputNumber :model-value="currentPage" :clearable="false" class="o-pagination-input" controls="none" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
+              <OInputNumber
+                :model-value="currentPage"
+                :clearable="false"
+                class="o-pagination-input"
+                controls="none"
+                :min="1"
+                :max="totalPage"
+                @change="goToChange"
+              />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
             </div>
           </template>
           <template v-else>
@@ -143,18 +176,14 @@ const goToChange = (val: string | number) => {
         </div>
       </div>
       <template v-if="!props.simple">
-        <div class="o-pagination-size">
-          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel">
-            <OOption v-for="item in pageSizeList" :key="item.value" :label="item.label" :value="item.value" />
-          </OSelect>
-        </div>
         <div class="o-pagination-goto">
           {{ Labels.goto }}&nbsp;<OInputNumber
             :model-value="currentPage"
             class="o-pagination-input"
             controls="none"
-            @blur="goToChange"
-            @press-enter="goToChange"
+            :min="1"
+            :max="totalPage"
+            @change="goToChange"
           />
         </div>
       </template>
diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
index 5472ad90c93d44b771722276cf65b80659bf14df..74086d10c17af186d4e9bf834e03be14aa072876 100644
--- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
@@ -2,9 +2,14 @@
 import { ref } from 'vue';
 import { OPagination } from '../index';
 const currentPage = ref(5);
-// setTimeout(() => {
-//   currentPage.value = 3;
-// }, 2000);
+const total = ref(100);
+
+setTimeout(() => {
+  total.value = 50;
+}, 2000);
+
+const pageSize = 8;
+const pageSizes = [8, 16, 32, 64];
 const onChange = (value: { current: number; size: number }) => {
   console.log(value);
 };
@@ -12,11 +17,12 @@ const onChange = (value: { current: number; size: number }) => {
 <template>
   <h4>Basic</h4>
   <div class="sec">
-    <OPagination :total="100" :current-page="currentPage" @change="onChange" />
+    <OPagination :total="total" :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" @change="onChange" />
   </div>
   <h4>Simple</h4>
   <div class="sec">
-    <OPagination :total="100" :current-page="currentPage" simple @change="onChange" />
+    <div>当前页：{{ currentPage }}</div>
+    <OPagination v-model:current-page="currentPage" :total="100" simple @change="onChange" />
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/pagination/pagination.ts b/packages/opendesign/src/components/pagination/pagination.ts
index 384471d0e0149889664d2554b60df05257963776..cce67a5b1432ed0d4d2006417dad9bd5e9889e40 100644
--- a/packages/opendesign/src/components/pagination/pagination.ts
+++ b/packages/opendesign/src/components/pagination/pagination.ts
@@ -6,6 +6,8 @@ function getNumbers(min: number, max: number) {
   return arr;
 }
 export function getPagerItem(totalPage: number, currentPage = 1, showPageCount = 9) {
+  const activePage = currentPage > totalPage ? totalPage : currentPage;
+
   const maxCount = showPageCount > 3 ? showPageCount : 3;
   let pages: Array<{ value: number | 'left' | 'right', isMore?: boolean, list?: number[] }> = [];
 
@@ -36,8 +38,8 @@ export function getPagerItem(totalPage: number, currentPage = 1, showPageCount =
   } else {
     const d = (maxCount - 3) / 2;
 
-    let min = currentPage - Math.floor(d);
-    let max = currentPage + Math.ceil(d);
+    let min = activePage - Math.floor(d);
+    let max = activePage + Math.ceil(d);
 
     // 处理边缘问题
     if (max > totalPage - 1) {
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index b470b41966b697d5602e61dbd95a8333b195250a..60a5816496be3ce6e76e9346accc6cd22d8cb8de 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -5,7 +5,7 @@
   align-items: center;
   white-space: nowrap;
 
-  > *:not(first-child) {
+  > *:not(:first-child) {
     margin-left: 12px;
   }
 }
diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scrollbar/OScrollbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3891b87bd8d9dae847a5df0b8091e8b32a82d82
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/OScrollbar.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ec5dc7c6bd25f7e64fd9a0630f89f0b72a1db88
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ScrollbarBasic from './ScrollbarBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <ScrollbarBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39b8f290b0528de46f0cb650ca6d18c81a99b840
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { OScrollbar } from '../index';
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <OScrollbar />
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/components/scrollbar/index.ts b/packages/opendesign/src/components/scrollbar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d55162bde6686f65c0bee837307855c86daf8ac4
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+import _OScrollbar from './OScrollbar.vue';
+
+const OScrollbar = Object.assign(_OScrollbar, {
+  install(app: App) {
+    app.component(_OScrollbar.name, _OScrollbar);
+  },
+});
+
+export { OScrollbar };
diff --git a/packages/opendesign/src/components/scrollbar/scrollbar.ts b/packages/opendesign/src/components/scrollbar/scrollbar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d0993fe253dde108e82b5c028b4cd63f4acd85c
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/scrollbar.ts
@@ -0,0 +1,22 @@
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useReiszeObserverDirective } from '../hooks';
+
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
+export default defineComponent({
+  name: 'OResizeObserver',
+  emits: ['resize'],
+  setup(props, { emit, slots }) {
+    const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => {
+      // 触发resize事件
+      emit('resize', entry, isFirst);
+    });
+
+    return () => {
+      const children = slots.default?.();
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]]));
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bce181a7e1bc7db28c5418100a87d16fd0cea708
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/index.scss
@@ -0,0 +1,4 @@
+@use './var.scss';
+
+.o-scrollbar {
+}
diff --git a/packages/opendesign/src/components/scrollbar/style/index.ts b/packages/opendesign/src/components/scrollbar/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/scrollbar/style/var.scss b/packages/opendesign/src/components/scrollbar/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b9ec5be345abef50894b1206d47e2c6409eabed
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/var.scss
@@ -0,0 +1,2 @@
+.o-scrollbar {
+}
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 7896254e94a26934c39ee8df5ffad0750c1251b0..d8e82025110439e34c16cd10593ccaa4167d0856 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -88,12 +88,14 @@ provide(selectOptionInjectKey, {
   value: activeVal,
   update: (val: SelectOptionT, emit?: boolean) => {
     activeLabel.value = val.label;
-    console.log(activeLabel.value);
 
     if (emit) {
+      if (activeVal.value !== val.value) {
+        emits('change', val.value);
+        activeVal.value = val.value;
+        console.log('选中change', val.value, activeLabel.value);
+      }
       emits('update:modelValue', val.value);
-      emits('change', val.value);
-      activeVal.value = val.value;
       showOption.value = false;
     }
   },
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e20e96dc98ed0110876190738bfb0499cd9b9480
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
+import { isFunction } from '../_shared/is';
+import { IconX } from '../icons';
+import { trigger } from '../_shared/event';
+import { toInputString } from './textarea';
+import { OResizeObserver } from '../resize-observer';
+
+interface InputPropT {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue?: string;
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue?: string;
+  /**
+   * 大小
+   */
+  size?: SizeT;
+  /**
+   * 形状
+   */
+  shape?: ShapeT;
+  /**
+   * 提示文本
+   */
+  placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 是否只读
+   */
+  readonly?: boolean;
+  /**
+   * 是否可以清除
+   */
+  clearable?: boolean;
+  /**
+   * 是否支持调整尺寸
+   */
+  resize?: 'both' | 'horizontal' | 'vertical' | 'none';
+  /**
+   * 显示的行数
+   */
+  rows?: number;
+  /**
+   * 显示的行数
+   */
+  cols?: number;
+  /**
+   * 最大字符长度
+   */
+  maxLength?: number;
+  /**
+   * 超过最大字符长度时是否允许输入
+   */
+  inputOutLimit?: boolean;
+  /**
+   * 是否自动计算高度
+   */
+  autoHeight?: boolean;
+  /**
+   * 获取长度方法
+   */
+  getLength?: (val: string) => number;
+  /**
+   * 高度自适应
+   */
+  autoResize?: boolean;
+}
+const props = withDefaults(defineProps<InputPropT>(), {
+  modelValue: undefined,
+  defaultValue: '',
+  size: undefined,
+  shape: undefined,
+  placeholder: '',
+  clearable: true,
+  status: undefined,
+  resize: 'vertical',
+  rows: 3,
+  cols: 20,
+  maxLength: undefined,
+  getLength: undefined,
+  inputOutLimit: true,
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+  (e: 'input', value: string, evt: Event): void;
+  (e: 'blur', value: string, evt: FocusEvent): void;
+  (e: 'focus', value: string, evt: FocusEvent): void;
+  (e: 'clear', evt: Event): void;
+  (e: 'keydown', value: string, evt: KeyboardEvent): void;
+}>();
+
+const textareaHeight = ref();
+
+const textareaRef = ref<HTMLElement | null>(null);
+// 数字输入框当前值
+const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 当前textarea文本值
+const textareaText = ref(realValue.value);
+// 监听属性变化，刷新值
+watch(
+  () => props.modelValue,
+  (val) => {
+    // console.log('watch', val);
+    realValue.value = toInputString(val);
+    textareaText.value = `${realValue.value}\r\n`;
+  }
+);
+
+const resizeValue = computed(() => {
+  return props.autoHeight || props.disabled ? 'none' : props.resize;
+});
+
+const getValueLength = (val: string) => {
+  if (isFunction(props.getLength)) {
+    return props.getLength(val);
+  }
+  return val.length ?? 0;
+};
+// 是否超出最大长度限制
+const currentLength = computed(() => getValueLength(realValue.value));
+const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
+
+const status = computed(() => {
+  return props.status ?? (isOutLengthLimit.value ? 'error' : '');
+});
+
+// 是否聚焦状态
+const isFocus = ref(false);
+let lastValue: string = realValue.value;
+
+const updateValue = (val: string) => {
+  emits('update:modelValue', val);
+
+  if (lastValue !== val) {
+    emits('change', val);
+    lastValue = val;
+  }
+  return val;
+};
+
+// 正在输入中文，处理输入过程中触发input事件
+let isComposing = false;
+// 解决点击组件内的非textarea区域触发focus、blur问题
+let clickInside = false;
+
+// 开始中文输入
+const onCompositionStart = () => {
+  isComposing = true;
+};
+// 结束中文输入
+const onCompositionEnd = (e: Event) => {
+  if (!isComposing) {
+    return;
+  }
+
+  isComposing = false;
+  trigger(e.target as HTMLElement, 'input');
+};
+
+const onInput = (e: Event) => {
+  if (isComposing) {
+    return;
+  }
+  const val = (e.target as HTMLInputElement)?.value;
+  emits('input', val, e);
+  textareaText.value = `${val}\r\n`;
+
+  emits('update:modelValue', val);
+};
+
+const onFocus = (e: FocusEvent) => {
+  clickInside = false;
+  if (isFocus.value) {
+    return;
+  }
+  isFocus.value = true;
+  emits('focus', realValue.value, e);
+};
+
+const onBlur = (e: FocusEvent) => {
+  if (clickInside) {
+    clickInside = false;
+    return;
+  }
+  isFocus.value = false;
+  const val = (e.target as HTMLInputElement)?.value;
+  const v = updateValue(val);
+  emits('blur', v, e);
+};
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (!isComposing) {
+    const val = (e.target as HTMLInputElement)?.value;
+    emits('keydown', val, e);
+  }
+};
+// 清除值
+const clearClick = (e: Event) => {
+  updateValue('');
+  emits('clear', e);
+};
+const onMouseDown = (e: MouseEvent) => {
+  if ((e.target as HTMLInputElement) !== textareaRef.value) {
+    clickInside = true;
+  }
+};
+
+const onMirrorResize = (en: ResizeObserverEntry) => {
+  textareaHeight.value = en.target.clientHeight;
+};
+</script>
+<template>
+  <label
+    class="o-textarea"
+    :class="[
+      `o-textarea-size-${props.size || defaultSize}`,
+      `o-textarea-shape-${props.shape || defaultShape}`,
+      status ? `o-textarea-status-${status}` : '',
+      {
+        'o-textarea-disabled': props.disabled,
+        'o-textarea-focus': isFocus,
+        'o-textarea-auto-height': props.autoHeight,
+      },
+    ]"
+    @mousedown="onMouseDown"
+  >
+    <div
+      class="o-textarea-wrap"
+      :class="{
+        'o-textarea-clearable': props.clearable && realValue !== '' && !props.disabled,
+      }"
+    >
+      <textarea
+        ref="textareaRef"
+        class="o-textarea-textarea"
+        :placeholder="props.placeholder"
+        :value="realValue"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        :style="{
+          resize: resizeValue,
+          height: textareaHeight + 'px',
+        }"
+        :maxlength="props.inputOutLimit ? '' : props.maxLength"
+        :rows="props.rows"
+        :cols="props.cols"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @keydown="onKeyDown"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
+      ></textarea>
+
+      <OResizeObserver v-if="props.autoHeight" @resize="onMirrorResize">
+        <div class="o-textarea-mirror">{{ textareaText }}</div>
+      </OResizeObserver>
+      <div v-if="props.clearable" class="o-textarea-clear" @click="clearClick"><IconX class="o-textarea-clear-icon" /></div>
+      <div v-if="props.maxLength" class="o-textarea-limit">
+        <span :class="{ 'is-error': isOutLengthLimit }">{{ currentLength }}</span
+        >/{{ props.maxLength }}
+      </div>
+    </div>
+  </label>
+</template>
diff --git a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20a9d3be45982439e05c77faeec2aec57506244c
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import '../style';
+import '../../option/style';
+
+import TextareaBasic from './TextareaBasic.vue';
+import TextareaAutoHeight from './TextareaAutoHeight.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <TextareaBasic />
+    <TextareaAutoHeight />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3eea2a6c6b0b96b5baf404441415e22be7214166
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '../index';
+
+const val1 = ref('max width: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
+const val2 = ref('min width: 100px');
+setTimeout(() => {
+  val1.value = '123';
+  val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
+}, 2000);
+</script>
+<template>
+  <h4>Auto Width</h4>
+  <section>
+    <div>
+      <OTextarea v-model="val1" auto-height />
+    </div>
+    <div>
+      max-height: 120px:
+      <OTextarea v-model="val1" auto-height style="max-height: 120px" />
+    </div>
+    <div>
+      min-height: 200px:
+      <OTextarea v-model="val2" auto-height style="min-height: 120px" />
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a0cf621044f97eca4f1edc6380b1ce2b3f6925d
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '../index';
+
+const val1 = ref('this is input value');
+const val2 = ref('this is input value');
+setTimeout(() => {
+  // val1.value += '---';
+}, 2000);
+
+const printEvent = (event: string, val?: string | number) => {
+  console.log(`[${event}]`, val);
+};
+</script>
+<template>
+  <h4>Size</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section style="align-items: flex-start">
+      <OTextarea
+        v-model="val1"
+        size="small"
+        @blur="(v) => printEvent('blur', v)"
+        @change="(v) => printEvent('change', v)"
+        @input="(v) => printEvent('input', v)"
+        @focus="(v) => printEvent('focus', v)"
+        @keydown="(v) => printEvent('keydown', v)"
+      />
+      <OTextarea v-model="val1" size="normal" />
+      <OTextarea v-model="val1" size="large" />
+    </section>
+  </div>
+  <h4>Round</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section style="align-items: flex-start">
+      <OTextarea v-model="val1" size="small" shape="round" />
+      <OTextarea v-model="val1" size="normal" resize="both" shape="round" />
+      <OTextarea v-model="val1" size="large" shape="round" />
+    </section>
+  </div>
+  <h4>Status</h4>
+  <section>
+    <div>
+      <div>success:</div>
+      <OTextarea v-model="val1" status="success" />
+    </div>
+    <div>
+      <div>warning:</div>
+      <OTextarea v-model="val1" status="warning" />
+    </div>
+    <div>
+      <div>error:(default)</div>
+      <OTextarea v-model="val1" status="error" />
+    </div>
+  </section>
+  <h4>Disabled & Readonly</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section>
+      <OTextarea v-model="val1" disabled />
+      <OTextarea v-model="val1" readonly />
+    </section>
+  </div>
+  <h4>Resize</h4>
+  <section>
+    <div>
+      <div>both:</div>
+      <OTextarea v-model="val1" resize="both" />
+    </div>
+    <div>
+      <div>horizontal:</div>
+      <OTextarea v-model="val1" resize="horizontal" />
+    </div>
+    <div>
+      <div>vertical:(default)</div>
+      <OTextarea v-model="val1" resize="vertical" />
+    </div>
+    <div>
+      <div>none:</div>
+      <OTextarea v-model="val1" resize="none" />
+    </div>
+  </section>
+  <h4>MaxLength</h4>
+  <section>
+    <div>
+      <div>MaxLength: 10 | val2:{{ val2 }}</div>
+      <OTextarea v-model="val1" :max-length="10" />
+    </div>
+    <div>
+      <div>input-out-limit：超出长度时不能输入</div>
+      <OTextarea v-model="val1" :max-length="10" :input-out-limit="false" />
+    </div>
+  </section>
+  <h4>Clearable</h4>
+  <section>
+    <OTextarea v-model="val1" :max-length="10" size="large" shape="round" :clearable="false" />
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/index.ts b/packages/opendesign/src/components/textarea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e45e3fc4a22e8c5e5639c67febd3aefb3324d7c
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/index.ts
@@ -0,0 +1,9 @@
+import _OTextarea from './OTextarea.vue';
+import type { App } from 'vue';
+
+const OTextarea = Object.assign(_OTextarea, {
+  install(app: App) {
+    app.component(_OTextarea.name, _OTextarea);
+  },
+});
+export { OTextarea };
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1ce6ab2769e4c1fa992d7eabbfee18af7a200828
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -0,0 +1,180 @@
+@use './var.scss';
+
+.o-textarea {
+  cursor: pointer;
+  color: var(--textarea-color);
+  display: inline-flex;
+  font-size: var(--textarea-text-size);
+  line-height: var(--textarea-text-height);
+}
+
+.o-textarea-wrap {
+  display: flex;
+  border-radius: var(--textarea-radius);
+  border: 1px solid var(--textarea-border);
+  background-color: var(--textarea-bg);
+  position: relative;
+  flex-direction: column;
+  justify-items: stretch;
+  &:hover {
+    border-color: var(--textarea-border-hover);
+    background-color: var(--textarea-bg-hover);
+  }
+  &.is-focus {
+    border-color: var(--textarea-border-focus);
+    background-color: var(--textarea-bg-focus);
+  }
+}
+
+.o-textarea-textarea {
+  padding: var(--textarea-padding-v) var(--textarea-padding-h);
+  outline: none;
+  border: none;
+  color: inherit;
+  cursor: inherit;
+  background-color: transparent;
+  display: inline-flex;
+  width: 100%;
+  caret-color: var(--o-color-primary1);
+  line-height: inherit;
+  min-height: calc(var(--textarea-text-height) + var(--textarea-padding-v) * 2);
+
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.o-textarea-clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  font-size: 16px;
+  margin-top: -8px;
+  border-radius: 50%;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--textarea-icon-color);
+  background-color: var(--textarea-icon-bg);
+
+  &:hover {
+    color: var(--textarea-icon-color-hover);
+  }
+}
+
+.o-textarea-clear-icon {
+  stroke-width: 0.5px;
+}
+
+.o-textarea-clearable {
+  &:hover {
+    .o-textarea-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.o-textarea-disabled {
+  .o-textarea-clear {
+    display: none;
+  }
+  .o-textarea-wrap {
+    color: var(--textarea-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--textarea-border-disabled);
+    background-color: var(--textarea-bg-disabled);
+  }
+}
+
+.o-textarea-limit {
+  position: absolute;
+  right: 8px;
+  bottom: 4px;
+  color: var(--textarea-limit-color);
+  font-size: var(--textarea-limit-text-size);
+  line-height: var(--textarea-limit-text-height);
+  > .is-error {
+    color: var(--textarea-limit-color-error);
+  }
+}
+
+.o-textarea-mirror {
+  padding: var(--textarea-padding-v) var(--textarea-padding-h);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  line-height: inherit;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  visibility: hidden;
+  min-height: var(--textarea-text-height);
+  position: absolute;
+  left: 100%;
+  top: 0;
+  pointer-events: none;
+  background-color: rgba($color: #ff0000, $alpha: 0.5);
+}
+
+.o-textarea-size-small {
+  --textarea-text-size: var(--textarea-text-size-s);
+  --textarea-text-height: var(--textarea-text-height-s);
+  --textarea-padding-v: 2px;
+  --textarea-padding-h: 8px;
+  --textarea-padding: 2px 8px;
+  --textarea-radius: var(--textarea-radius-s);
+  &.o-textarea-shape-round {
+    --textarea-radius: 12px;
+  }
+}
+.o-textarea-size-normal {
+  --textarea-text-size: var(--textarea-text-size-m);
+  --textarea-text-height: var(--textarea-text-height-m);
+  --textarea-padding-v: 4px;
+  --textarea-padding-h: 12px;
+  --textarea-padding: 4px 12px;
+  --textarea-radius: var(--textarea-radius-m);
+  &.o-textarea-shape-round {
+    --textarea-radius: 16px;
+  }
+}
+.o-textarea-size-large {
+  --textarea-text-size: var(--textarea-text-size-l);
+  --textarea-text-height: var(--textarea-text-height-l);
+  --textarea-padding-v: 6px;
+  --textarea-padding-h: 12px;
+  --textarea-padding: 6px 12px;
+  --textarea-radius: var(--textarea-radius-l);
+  &.o-textarea-shape-round {
+    --textarea-radius: 20px;
+  }
+}
+
+.o-textarea-status-success {
+  --textarea-border: var(--textarea-border-success);
+  --textarea-border-hover: var(--textarea-border-success-hover);
+  --textarea-border-focus: var(--textarea-border-success-focus);
+  --textarea-bg: var(--textarea-bg-success);
+  --textarea-bg-hover: var(--textarea-bg-success-hover);
+  --textarea-bg-focus: var(--textarea-bg-success-focus);
+}
+.o-textarea-status-warning {
+  --textarea-border: var(--textarea-border-warning);
+  --textarea-border-hover: var(--textarea-border-warning-hover);
+  --textarea-border-focus: var(--textarea-border-warning-focus);
+  --textarea-bg: var(--textarea-bg-warning);
+  --textarea-bg-hover: var(--textarea-bg-warning-hover);
+  --textarea-bg-focus: var(--textarea-bg-warning-focus);
+}
+.o-textarea-status-error {
+  --textarea-border: var(--textarea-border-error);
+  --textarea-border-hover: var(--textarea-border-error-hover);
+  --textarea-border-focus: var(--textarea-border-error-focus);
+  --textarea-bg: var(--textarea-bg-error);
+  --textarea-bg-hover: var(--textarea-bg-error-hover);
+  --textarea-bg-focus: var(--textarea-bg-error-focus);
+}
diff --git a/packages/opendesign/src/components/textarea/style/index.ts b/packages/opendesign/src/components/textarea/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/textarea/style/var.scss b/packages/opendesign/src/components/textarea/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3bba34f5326662378b883d571b65b616fc407980
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/var.scss
@@ -0,0 +1,54 @@
+.o-textarea {
+  --textarea-text-size-s: var(--o-font_size-tip1);
+  --textarea-text-height-s: var(--o-line_height-tip1);
+  --textarea-text-size-m: var(--o-font_size-text);
+  --textarea-text-height-m: var(--o-line_height-text);
+  --textarea-text-size-l: var(--o-font_size-h4);
+  --textarea-text-height-l: var(--o-line_height-h4);
+
+  --textarea-radius-s: var(--o-radius-s);
+  --textarea-radius-m: var(--o-radius-s);
+  --textarea-radius-l: var(--o-radius-s);
+
+  --textarea-border: var(--o-color-info1);
+  --textarea-border-hover: var(--o-color-primary2);
+  --textarea-border-focus: var(--o-color-primary3);
+  --textarea-border-disabled: var(--o-color-info1);
+
+  --textarea-bg: var(--o-color-bg1);
+  --textarea-bg-hover: var(--o-color-bg3);
+  --textarea-bg-focus: var(--o-color-bg3);
+  --textarea-bg-disabled: var(--o-color-info4);
+
+  --textarea-color: var(--o-color-text2);
+  --textarea-color-disabled: var(--o-color-text4);
+
+  --textarea-icon-color: var(--o-color-text3);
+  --textarea-icon-bg: var(--o-color-bg4);
+  --textarea-icon-color-hover: var(--o-color-primary1);
+
+  --textarea-border-success: var(--o-color-success1);
+  --textarea-border-success-hover: var(--o-color-success2);
+  --textarea-border-success-focus: var(--o-color-success3);
+  --textarea-border-warning: var(--o-color-warning1);
+  --textarea-border-warning-hover: var(--o-color-warning2);
+  --textarea-border-warning-focus: var(--o-color-warning3);
+  --textarea-border-error: var(--o-color-danger1);
+  --textarea-border-error-hover: var(--o-color-danger2);
+  --textarea-border-error-focus: var(--o-color-danger3);
+
+  --textarea-bg-success: var(--o-color-bg1);
+  --textarea-bg-success-hover: var(--o-color-bg1);
+  --textarea-bg-success-focus: var(--o-color-bg1);
+  --textarea-bg-warning: var(--o-color-bg1);
+  --textarea-bg-warning-hover: var(--o-color-bg1);
+  --textarea-bg-warning-focus: var(--o-color-bg1);
+  --textarea-bg-error: var(--o-color-bg1);
+  --textarea-bg-error-hover: var(--o-color-bg1);
+  --textarea-bg-error-focus: var(--o-color-bg1);
+
+  --textarea-limit-color: var(--o-color-text3);
+  --textarea-limit-color-error: var(--o-color-danger1);
+  --textarea-limit-text-size: var(--o-font_size-tip2);
+  --textarea-limit-text-height: var(--o-line_height-tip2);
+}
diff --git a/packages/opendesign/src/components/textarea/textarea.ts b/packages/opendesign/src/components/textarea/textarea.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c05e51f294e2438fa0736281a17ceaaf7a7fbe0
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/textarea.ts
@@ -0,0 +1,8 @@
+import { isNull, isUndefined } from '../_shared/is';
+
+export function toInputString(val: unknown): string {
+  if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
+    return '';
+  }
+  return String(val);
+}
\ No newline at end of file
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 82ee0927e3e5121128404a50e27255faf6da1a4a..91d99718ceb5d249559e684c3e65782f6e179463 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -69,6 +69,12 @@ export const routes = [
     label: '数字输入框',
     component: () => import('@demo/input-number/__demo__/IndexInputNumber.vue'),
   },
+  {
+    path: '/textarea',
+    name: 'Textarea',
+    label: '文本域',
+    component: () => import('@demo/textarea/__demo__/IndexTextarea.vue'),
+  },
   {
     path: '/select',
     name: 'Select',
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 3ae61d4f1a3e92d20f1b8334a23e478d591cb442..b05e7b7c12f40a4b6dd5e86fe03f8efe58597842 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -72,5 +72,5 @@ section {
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 16px;
 }