From 3d51df2264cb54a2ca8cd884fa220edee279d45a Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 25 Dec 2024 21:31:13 +0800
Subject: [PATCH 1/5] feat: textarea v15

---
 migrate-from-v2.md                            |  8 +--
 .../__snapshots__/textarea.spec.tsx.snap      |  2 +-
 src/packages/textarea/demos/h5/demo1.tsx      | 25 +++++----
 src/packages/textarea/demos/h5/demo2.tsx      |  8 ++-
 src/packages/textarea/demos/h5/demo3.tsx      |  2 +-
 src/packages/textarea/demos/h5/demo4.tsx      |  2 +-
 src/packages/textarea/demos/h5/demo5.tsx      |  2 +-
 src/packages/textarea/demos/h5/demo6.tsx      |  2 +-
 src/packages/textarea/demos/h5/demo7.tsx      |  1 +
 src/packages/textarea/demos/h5/demo8.tsx      |  1 +
 src/packages/textarea/demos/taro/demo2.tsx    |  8 ++-
 src/packages/textarea/demos/taro/demo3.tsx    |  2 +-
 src/packages/textarea/demos/taro/demo4.tsx    |  2 +-
 src/packages/textarea/demos/taro/demo5.tsx    |  2 +-
 src/packages/textarea/demos/taro/demo6.tsx    |  2 +-
 src/packages/textarea/demos/taro/demo7.tsx    |  1 +
 src/packages/textarea/demos/taro/demo8.tsx    |  1 +
 src/packages/textarea/textarea.scss           | 54 +++++++++++++------
 src/packages/textarea/textarea.taro.tsx       |  4 ++
 src/packages/textarea/textarea.tsx            |  4 ++
 src/styles/variables.scss                     | 16 +++---
 21 files changed, 99 insertions(+), 50 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 6e386b6808..668d2eeac6 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -516,12 +516,8 @@ plugins: [
 
 #### TextArea
 
-- `maxlength` 重命名为 `maxLength`
-- `readonly` 重命名为 `readOnly`
-- `limitShow` 重命名为 `showCount`
-- `autosize` 重命名为 `autoSize`
-- 移除 `textAlign`，可通过 `style` 传入
-- `defaultValue` 改为非受控，增加受控值 `value`
+- 增加 `type`，只为 `plain` 和 `container`
+- 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
 
diff --git a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
index 2c174bfdb4..8c0e742f0f 100644
--- a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
+++ b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`textarea props test 1`] = `
 <div>
   <div
-    class="nut-textarea"
+    class="nut-textarea nut-textarea-plain"
   >
     <textarea
       class="nut-textarea-textarea "
diff --git a/src/packages/textarea/demos/h5/demo1.tsx b/src/packages/textarea/demos/h5/demo1.tsx
index 5e52e2156c..fbdb065c64 100644
--- a/src/packages/textarea/demos/h5/demo1.tsx
+++ b/src/packages/textarea/demos/h5/demo1.tsx
@@ -1,16 +1,23 @@
 import React from 'react'
-import { TextArea } from '@nutui/nutui-react'
+import { Space, TextArea } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <TextArea
-      defaultValue="基础用法"
-      className="text-1"
-      style={{ fontSize: '12px' }}
-      onChange={(value) => console.log('change', value)}
-      onBlur={() => console.log('blur')}
-      onFocus={() => console.log('focus')}
-    />
+    <Space direction="vertical">
+      <TextArea
+        defaultValue="基础用法1"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+      <TextArea
+        defaultValue="基础用法2"
+        type="container"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+    </Space>
   )
 }
 export default Demo1
diff --git a/src/packages/textarea/demos/h5/demo2.tsx b/src/packages/textarea/demos/h5/demo2.tsx
index 89d2c76893..e8c1692f4e 100644
--- a/src/packages/textarea/demos/h5/demo2.tsx
+++ b/src/packages/textarea/demos/h5/demo2.tsx
@@ -3,6 +3,12 @@ import { TextArea } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return <TextArea value={value} onChange={(value) => setValue(value)} />
+  return (
+    <TextArea
+      type="container"
+      value={value}
+      onChange={(value) => setValue(value)}
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/h5/demo3.tsx b/src/packages/textarea/demos/h5/demo3.tsx
index 7291921416..845e5b65b8 100644
--- a/src/packages/textarea/demos/h5/demo3.tsx
+++ b/src/packages/textarea/demos/h5/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} />
+  return <TextArea showCount maxLength={20} type="container" />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/h5/demo4.tsx b/src/packages/textarea/demos/h5/demo4.tsx
index 10b429a2fe..28e05cb901 100644
--- a/src/packages/textarea/demos/h5/demo4.tsx
+++ b/src/packages/textarea/demos/h5/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} />
+  return <TextArea autoSize maxLength={-1} type="container" />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/h5/demo5.tsx b/src/packages/textarea/demos/h5/demo5.tsx
index 254d08bc62..8c338430ed 100644
--- a/src/packages/textarea/demos/h5/demo5.tsx
+++ b/src/packages/textarea/demos/h5/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} />
+      <TextArea showCount maxLength={20} type="container" />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo6.tsx b/src/packages/textarea/demos/h5/demo6.tsx
index 42b36a9847..9266e13e9d 100644
--- a/src/packages/textarea/demos/h5/demo6.tsx
+++ b/src/packages/textarea/demos/h5/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" />
+      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo7.tsx b/src/packages/textarea/demos/h5/demo7.tsx
index ec141ce972..536b410ae3 100644
--- a/src/packages/textarea/demos/h5/demo7.tsx
+++ b/src/packages/textarea/demos/h5/demo7.tsx
@@ -8,6 +8,7 @@ const Demo7 = () => {
         disabled
         defaultValue="textarea禁用状态"
         showCount
+        type="container"
         maxLength={20}
       />
     </>
diff --git a/src/packages/textarea/demos/h5/demo8.tsx b/src/packages/textarea/demos/h5/demo8.tsx
index 65ac4a02ed..fdeec65645 100644
--- a/src/packages/textarea/demos/h5/demo8.tsx
+++ b/src/packages/textarea/demos/h5/demo8.tsx
@@ -5,6 +5,7 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
+      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/demos/taro/demo2.tsx b/src/packages/textarea/demos/taro/demo2.tsx
index f843bfd247..0a770359c4 100644
--- a/src/packages/textarea/demos/taro/demo2.tsx
+++ b/src/packages/textarea/demos/taro/demo2.tsx
@@ -3,6 +3,12 @@ import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return <TextArea value={value} onChange={(value) => setValue(value)} />
+  return (
+    <TextArea
+      value={value}
+      onChange={(value) => setValue(value)}
+      type="container"
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/taro/demo3.tsx b/src/packages/textarea/demos/taro/demo3.tsx
index 9b33c14fcd..45ffcc1f2f 100644
--- a/src/packages/textarea/demos/taro/demo3.tsx
+++ b/src/packages/textarea/demos/taro/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} />
+  return <TextArea showCount maxLength={20} type="container" />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/taro/demo4.tsx b/src/packages/textarea/demos/taro/demo4.tsx
index 266513d773..40b3737a08 100644
--- a/src/packages/textarea/demos/taro/demo4.tsx
+++ b/src/packages/textarea/demos/taro/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} />
+  return <TextArea autoSize maxLength={-1} type="container" />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/taro/demo5.tsx b/src/packages/textarea/demos/taro/demo5.tsx
index d197f1ee46..5d3658b68c 100644
--- a/src/packages/textarea/demos/taro/demo5.tsx
+++ b/src/packages/textarea/demos/taro/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} />
+      <TextArea showCount maxLength={20} type="container" />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo6.tsx b/src/packages/textarea/demos/taro/demo6.tsx
index 950a3086e2..409f705656 100644
--- a/src/packages/textarea/demos/taro/demo6.tsx
+++ b/src/packages/textarea/demos/taro/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react-taro'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" />
+      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo7.tsx b/src/packages/textarea/demos/taro/demo7.tsx
index 7da8f42c02..8487a6ed31 100644
--- a/src/packages/textarea/demos/taro/demo7.tsx
+++ b/src/packages/textarea/demos/taro/demo7.tsx
@@ -7,6 +7,7 @@ const Demo7 = () => {
       <TextArea
         disabled
         defaultValue="textarea禁用状态"
+        type="container"
         showCount
         maxLength={20}
       />
diff --git a/src/packages/textarea/demos/taro/demo8.tsx b/src/packages/textarea/demos/taro/demo8.tsx
index f6b73fe9bf..afc2198726 100644
--- a/src/packages/textarea/demos/taro/demo8.tsx
+++ b/src/packages/textarea/demos/taro/demo8.tsx
@@ -5,6 +5,7 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
+      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index dccc7ece64..df913cb967 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -1,22 +1,26 @@
 .nut-textarea {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  background-color: $color-background-overlay;
-  font-size: $textarea-font;
-  padding: $textarea-padding;
+  font-size: $font-size-base;
+  border-radius: $radius-s;
+
+  &-container {
+    padding: $textarea-padding;
+    background-color: $color-background-overlay;
+  }
 
   &-limit {
-    position: absolute;
-    right: 15px;
-    bottom: 12px;
-    font-size: $textarea-font;
-    color: $textarea-limit-color;
+    text-align: right;
+    font-size: $font-size-base;
+    line-height: $font-size-base;
+    margin-top: 8px;
+    color: $color-text-help;
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
     }
   }
 
@@ -25,10 +29,11 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
+    height: 40px;
     min-width: 0;
     margin: 0;
     padding: 0;
-    font-size: $textarea-font;
+    font-size: $font-size-base;
     color: $textarea-text-color;
     caret-color: $textarea-text-curror-color;
     text-align: left;
@@ -36,22 +41,39 @@
     border: 0;
     resize: none;
 
+    // &::after{
+    //   content: '';
+    //   position: absolute;
+    //   width: 2px;
+    //   height: 14px;
+    //   background-color: red;
+    //   // left: 10px;
+    //   // top: 50%;
+    //   transform: translateY(-50%);
+    //   z-index: 1;
+    //   pointer-events: none;
+    // }
+
     .taro-textarea {
       color: $textarea-text-color;
       background-color: transparent;
       resize: none;
     }
 
+    &::placeholder {
+      color: $color-text-help;
+    }
+
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
       &::placeholder {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
       }
       .taro-textarea {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
         &::placeholder {
-          color: $textarea-disabled-color;
+          color: $color-text-disabled;
         }
       }
     }
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
index 5060c5b4b9..042bce55b2 100644
--- a/src/packages/textarea/textarea.taro.tsx
+++ b/src/packages/textarea/textarea.taro.tsx
@@ -21,6 +21,7 @@ export interface TextAreaProps
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  type: 'plain' | 'container'
   onChange: (value: string) => void
   onBlur: (event: Event) => void
   onFocus: (event: Event) => void
@@ -35,6 +36,7 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  type: 'plain',
 } as TextAreaProps
 export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   const { locale } = useConfig()
@@ -50,6 +52,7 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     disabled,
     autoSize,
     style,
+    type,
     onChange,
     onBlur,
     onFocus,
@@ -103,6 +106,7 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
         {
           [`${classPrefix}-disabled`]: disabled,
           [`${classPrefix}-rtl`]: rtl,
+          [`${classPrefix}-${type}`]: type,
         },
         className
       )}
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
index bdb40731cc..9459d2d4b5 100644
--- a/src/packages/textarea/textarea.tsx
+++ b/src/packages/textarea/textarea.tsx
@@ -15,6 +15,7 @@ export interface TextAreaProps extends BasicComponent {
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  type: 'plain' | 'container'
   onChange: (value: string) => void
   onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
   onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
@@ -30,6 +31,7 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  type: 'plain',
 } as TextAreaProps
 export const TextArea: FunctionComponent<
   Partial<TextAreaProps> &
@@ -51,6 +53,7 @@ export const TextArea: FunctionComponent<
     disabled,
     autoSize,
     style,
+    type,
     onChange,
     onBlur,
     onFocus,
@@ -118,6 +121,7 @@ export const TextArea: FunctionComponent<
         {
           [`${classPrefix}-disabled`]: disabled,
           [`${classPrefix}-rtl`]: rtl,
+          [`${classPrefix}-${type}`]: type,
         },
         className
       )}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3fd4faf536..1561226a68 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -561,9 +561,9 @@ $input-background-color: var(
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 // textarea（✅）
-$textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
-$textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
-$textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default;
+// $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
+$textarea-padding: var(--nutui-textarea-padding, 12px) !default;
+// $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text-help) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
@@ -571,12 +571,12 @@ $textarea-text-curror-color: var(
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
-  30px
-) !default;
-$textarea-disabled-color: var(
-  --nutui-textarea-disabled-color,
-  $color-text-disabled
+  20px
 ) !default;
+// $textarea-disabled-color: var(
+//   --nutui-textarea-disabled-color,
+//   $color-text-disabled
+// ) !default;
 
 // inputnumber（✅）
 $inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;

From 00af84f3c1c24d33795cb742998192d5c6891441 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 19:08:08 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 migrate-from-v2.md                         |   2 +-
 src/config.json                            |   1 +
 src/packages/textarea/demo.taro.tsx        |   7 ++
 src/packages/textarea/demo.tsx             |   7 ++
 src/packages/textarea/demos/h5/demo1.tsx   |   6 +-
 src/packages/textarea/demos/h5/demo2.tsx   |   8 +-
 src/packages/textarea/demos/h5/demo3.tsx   |   2 +-
 src/packages/textarea/demos/h5/demo4.tsx   |   2 +-
 src/packages/textarea/demos/h5/demo5.tsx   |   2 +-
 src/packages/textarea/demos/h5/demo6.tsx   |   2 +-
 src/packages/textarea/demos/h5/demo7.tsx   |   1 -
 src/packages/textarea/demos/h5/demo8.tsx   |   1 -
 src/packages/textarea/demos/h5/demo9.tsx   |  13 +++
 src/packages/textarea/demos/taro/demo1.tsx |  26 ++++--
 src/packages/textarea/demos/taro/demo9.tsx |  13 +++
 src/packages/textarea/textarea.scss        |  14 ++-
 src/packages/textarea/textarea.taro.tsx    | 103 ++++++++++++---------
 src/packages/textarea/textarea.tsx         |  95 ++++++++++---------
 src/styles/variables.scss                  |   8 +-
 19 files changed, 190 insertions(+), 123 deletions(-)
 create mode 100644 src/packages/textarea/demos/h5/demo9.tsx
 create mode 100644 src/packages/textarea/demos/taro/demo9.tsx

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 668d2eeac6..369d5cfb76 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -516,7 +516,7 @@ plugins: [
 
 #### TextArea
 
-- 增加 `type`，只为 `plain` 和 `container`
+- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
 - 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
diff --git a/src/config.json b/src/config.json
index 57a6efe126..6f5af38150 100644
--- a/src/config.json
+++ b/src/config.json
@@ -702,6 +702,7 @@
           "sort": 2,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "VickyYe"
         },
         {
diff --git a/src/packages/textarea/demo.taro.tsx b/src/packages/textarea/demo.taro.tsx
index 041f0b7a69..5d4a9027a5 100644
--- a/src/packages/textarea/demo.taro.tsx
+++ b/src/packages/textarea/demo.taro.tsx
@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 interface T {
   basic: string
@@ -24,6 +25,7 @@ interface T {
   disabledState: string
   textAlign: string
   alignRight: string
+  error: string
 }
 
 const TextAreaDemo = () => {
@@ -40,6 +42,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用状态',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '错误状态',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -53,6 +56,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用狀態',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '錯誤狀態',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -66,6 +70,7 @@ const TextAreaDemo = () => {
       disabledState: 'Disabled state',
       textAlign: 'TextAlign',
       alignRight: 'TextAlign Right',
+      error: 'Status is error',
     },
   })
   return (
@@ -89,6 +94,8 @@ const TextAreaDemo = () => {
         <Demo7 />
         <View className="h2">{translated.textAlign}</View>
         <Demo8 />
+        <h2>{translated.error}</h2>
+        <Demo9 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/textarea/demo.tsx b/src/packages/textarea/demo.tsx
index 190028c7f5..b688b5e1b9 100644
--- a/src/packages/textarea/demo.tsx
+++ b/src/packages/textarea/demo.tsx
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 interface T {
   basic: string
@@ -21,6 +22,7 @@ interface T {
   disabledState: string
   textAlign: string
   alignRight: string
+  error: string
 }
 
 const TextAreaDemo = () => {
@@ -37,6 +39,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用状态',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '错误状态',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -50,6 +53,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用狀態',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '錯誤狀態',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -63,6 +67,7 @@ const TextAreaDemo = () => {
       disabledState: 'Disabled state',
       textAlign: 'TextAlign',
       alignRight: 'TextAlign Right',
+      error: 'Status is error',
     },
   })
 
@@ -85,6 +90,8 @@ const TextAreaDemo = () => {
         <Demo7 />
         <h2>{translated.textAlign}</h2>
         <Demo8 />
+        <h2>{translated.error}</h2>
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/textarea/demos/h5/demo1.tsx b/src/packages/textarea/demos/h5/demo1.tsx
index fbdb065c64..3e32704ca2 100644
--- a/src/packages/textarea/demos/h5/demo1.tsx
+++ b/src/packages/textarea/demos/h5/demo1.tsx
@@ -5,14 +5,14 @@ const Demo1 = () => {
   return (
     <Space direction="vertical">
       <TextArea
-        defaultValue="基础用法1"
+        plain
+        defaultValue="基础用法：纯文本型"
         onChange={(value) => console.log('change', value)}
         onBlur={() => console.log('blur')}
         onFocus={() => console.log('focus')}
       />
       <TextArea
-        defaultValue="基础用法2"
-        type="container"
+        defaultValue="基础用法：容器型"
         onChange={(value) => console.log('change', value)}
         onBlur={() => console.log('blur')}
         onFocus={() => console.log('focus')}
diff --git a/src/packages/textarea/demos/h5/demo2.tsx b/src/packages/textarea/demos/h5/demo2.tsx
index e8c1692f4e..89d2c76893 100644
--- a/src/packages/textarea/demos/h5/demo2.tsx
+++ b/src/packages/textarea/demos/h5/demo2.tsx
@@ -3,12 +3,6 @@ import { TextArea } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return (
-    <TextArea
-      type="container"
-      value={value}
-      onChange={(value) => setValue(value)}
-    />
-  )
+  return <TextArea value={value} onChange={(value) => setValue(value)} />
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/h5/demo3.tsx b/src/packages/textarea/demos/h5/demo3.tsx
index 845e5b65b8..7291921416 100644
--- a/src/packages/textarea/demos/h5/demo3.tsx
+++ b/src/packages/textarea/demos/h5/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} type="container" />
+  return <TextArea showCount maxLength={20} />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/h5/demo4.tsx b/src/packages/textarea/demos/h5/demo4.tsx
index 28e05cb901..10b429a2fe 100644
--- a/src/packages/textarea/demos/h5/demo4.tsx
+++ b/src/packages/textarea/demos/h5/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} type="container" />
+  return <TextArea autoSize maxLength={-1} />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/h5/demo5.tsx b/src/packages/textarea/demos/h5/demo5.tsx
index 8c338430ed..254d08bc62 100644
--- a/src/packages/textarea/demos/h5/demo5.tsx
+++ b/src/packages/textarea/demos/h5/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} type="container" />
+      <TextArea showCount maxLength={20} />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo6.tsx b/src/packages/textarea/demos/h5/demo6.tsx
index 9266e13e9d..42b36a9847 100644
--- a/src/packages/textarea/demos/h5/demo6.tsx
+++ b/src/packages/textarea/demos/h5/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
+      <TextArea readOnly defaultValue="textarea只读状态" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/h5/demo7.tsx b/src/packages/textarea/demos/h5/demo7.tsx
index 536b410ae3..ec141ce972 100644
--- a/src/packages/textarea/demos/h5/demo7.tsx
+++ b/src/packages/textarea/demos/h5/demo7.tsx
@@ -8,7 +8,6 @@ const Demo7 = () => {
         disabled
         defaultValue="textarea禁用状态"
         showCount
-        type="container"
         maxLength={20}
       />
     </>
diff --git a/src/packages/textarea/demos/h5/demo8.tsx b/src/packages/textarea/demos/h5/demo8.tsx
index fdeec65645..65ac4a02ed 100644
--- a/src/packages/textarea/demos/h5/demo8.tsx
+++ b/src/packages/textarea/demos/h5/demo8.tsx
@@ -5,7 +5,6 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
-      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/demos/h5/demo9.tsx b/src/packages/textarea/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..4ad9c60643
--- /dev/null
+++ b/src/packages/textarea/demos/h5/demo9.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  return (
+    <TextArea
+      status="error"
+      defaultValue="输入内容错误"
+      message="输入内容错误"
+    />
+  )
+}
+export default Demo8
diff --git a/src/packages/textarea/demos/taro/demo1.tsx b/src/packages/textarea/demos/taro/demo1.tsx
index 6322f56d7d..9af4e91274 100644
--- a/src/packages/textarea/demos/taro/demo1.tsx
+++ b/src/packages/textarea/demos/taro/demo1.tsx
@@ -1,17 +1,23 @@
 import React from 'react'
-import { TextArea } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { Space, TextArea } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <TextArea
-      defaultValue="基础用法"
-      className="text-1"
-      style={{ fontSize: pxTransform(12) }}
-      onChange={(value) => console.log('change', value)}
-      onBlur={() => console.log('blur')}
-      onFocus={() => console.log('focus')}
-    />
+    <Space direction="vertical">
+      <TextArea
+        plain
+        defaultValue="基础用法：纯文本型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+      <TextArea
+        defaultValue="基础用法：容器型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+    </Space>
   )
 }
 export default Demo1
diff --git a/src/packages/textarea/demos/taro/demo9.tsx b/src/packages/textarea/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..00aab687f6
--- /dev/null
+++ b/src/packages/textarea/demos/taro/demo9.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  return (
+    <TextArea
+      status="error"
+      defaultValue="输入内容错误"
+      message="输入内容错误"
+    />
+  )
+}
+export default Demo8
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index df913cb967..fe1756c117 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -12,11 +12,16 @@
     background-color: $color-background-overlay;
   }
 
+  &-error {
+    border: 0.5px solid $color-danger;
+    background-color: $color-danger-light;
+  }
+
   &-limit {
     text-align: right;
     font-size: $font-size-base;
     line-height: $font-size-base;
-    margin-top: 8px;
+    margin-top: $spacing-base;
     color: $color-text-help;
     &-disabled {
       cursor: not-allowed;
@@ -24,6 +29,13 @@
     }
   }
 
+  &-description {
+    color: $color-danger;
+    margin-top: $spacing-base;
+    margin-left: $spacing-xxs;
+    font-size: $font-size-s;
+  }
+
   &-textarea {
     outline: none;
     display: block;
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
index 042bce55b2..48f8dce753 100644
--- a/src/packages/textarea/textarea.taro.tsx
+++ b/src/packages/textarea/textarea.taro.tsx
@@ -21,7 +21,9 @@ export interface TextAreaProps
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
-  type: 'plain' | 'container'
+  plain: boolean
+  status: 'error' | 'default'
+  message: string
   onChange: (value: string) => void
   onBlur: (event: Event) => void
   onFocus: (event: Event) => void
@@ -36,7 +38,9 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
-  type: 'plain',
+  plain: false,
+  status: 'default',
+  message: '',
 } as TextAreaProps
 export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   const { locale } = useConfig()
@@ -52,7 +56,9 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     disabled,
     autoSize,
     style,
-    type,
+    plain,
+    status,
+    message,
     onChange,
     onBlur,
     onFocus,
@@ -100,50 +106,55 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   }
 
   return (
-    <View
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-disabled`]: disabled,
-          [`${classPrefix}-rtl`]: rtl,
-          [`${classPrefix}-${type}`]: type,
-        },
-        className
+    <>
+      <View
+        className={classNames(
+          classPrefix,
+          disabled ? `${classPrefix}-disabled` : '',
+          readOnly ? `${classPrefix}-readonly` : '',
+          rtl ? `${classPrefix}-rtl` : '',
+          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
+          status ? `${classPrefix}-${status}` : '',
+          className
+        )}
+      >
+        <Textarea
+          nativeProps={{
+            style,
+            readOnly,
+            rows,
+            onCompositionStart: () => {
+              compositionRef.current = true
+            },
+            onCompositionEnd: () => {
+              compositionRef.current = false
+            },
+          }}
+          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          style={Taro.getEnv() === 'WEB' ? undefined : style}
+          disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
+          // @ts-ignore
+          value={inputValue}
+          onInput={(e: any) => handleChange(e)}
+          onBlur={(e: any) => handleBlur(e)}
+          onFocus={(e: any) => handleFocus(e)}
+          autoHeight={autoSize}
+          maxlength={maxLength}
+          placeholder={placeholder || locale.placeholder}
+          {...rest}
+        />
+        {showCount && (
+          <Text
+            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+          >
+            {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
+          </Text>
+        )}
+      </View>
+      {status === 'error' && message && (
+        <View className={`${classPrefix}-description`}>{message}</View>
       )}
-    >
-      <Textarea
-        nativeProps={{
-          style,
-          readOnly,
-          rows,
-          onCompositionStart: () => {
-            compositionRef.current = true
-          },
-          onCompositionEnd: () => {
-            compositionRef.current = false
-          },
-        }}
-        className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
-        style={Taro.getEnv() === 'WEB' ? undefined : style}
-        disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
-        // @ts-ignore
-        value={inputValue}
-        onInput={(e: any) => handleChange(e)}
-        onBlur={(e: any) => handleBlur(e)}
-        onFocus={(e: any) => handleFocus(e)}
-        autoHeight={autoSize}
-        maxlength={maxLength}
-        placeholder={placeholder || locale.placeholder}
-        {...rest}
-      />
-      {showCount && (
-        <Text
-          className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
-        >
-          {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
-        </Text>
-      )}
-    </View>
+    </>
   )
 }
 
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
index 9459d2d4b5..6bb900f35b 100644
--- a/src/packages/textarea/textarea.tsx
+++ b/src/packages/textarea/textarea.tsx
@@ -15,7 +15,9 @@ export interface TextAreaProps extends BasicComponent {
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
-  type: 'plain' | 'container'
+  plain: boolean
+  status: 'error' | 'default'
+  message: string
   onChange: (value: string) => void
   onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
   onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
@@ -31,7 +33,9 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
-  type: 'plain',
+  plain: false,
+  status: 'default',
+  message: '',
 } as TextAreaProps
 export const TextArea: FunctionComponent<
   Partial<TextAreaProps> &
@@ -53,7 +57,9 @@ export const TextArea: FunctionComponent<
     disabled,
     autoSize,
     style,
-    type,
+    plain,
+    status,
+    message,
     onChange,
     onBlur,
     onFocus,
@@ -115,46 +121,51 @@ export const TextArea: FunctionComponent<
   }
 
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-disabled`]: disabled,
-          [`${classPrefix}-rtl`]: rtl,
-          [`${classPrefix}-${type}`]: type,
-        },
-        className
+    <>
+      <div
+        className={classNames(
+          classPrefix,
+          disabled ? `${classPrefix}-disabled` : '',
+          readOnly ? `${classPrefix}-readonly` : '',
+          rtl ? `${classPrefix}-rtl` : '',
+          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
+          status ? `${classPrefix}-${status}` : '',
+          className
+        )}
+      >
+        <textarea
+          ref={textareaRef}
+          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          style={style}
+          disabled={disabled}
+          readOnly={readOnly}
+          value={inputValue}
+          onChange={(e) => handleChange(e)}
+          onBlur={(e) => handleBlur(e)}
+          onFocus={(e) => handleFocus(e)}
+          onCompositionEnd={() => {
+            compositionRef.current = false
+          }}
+          onCompositionStart={() => {
+            compositionRef.current = true
+          }}
+          rows={rows}
+          maxLength={maxLength === -1 ? undefined : maxLength}
+          placeholder={placeholder || locale.placeholder}
+          {...rest}
+        />
+        {showCount && (
+          <div
+            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+          >
+            {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
+          </div>
+        )}
+      </div>
+      {status === 'error' && message && (
+        <div className={`${classPrefix}-description`}>{message}</div>
       )}
-    >
-      <textarea
-        ref={textareaRef}
-        className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
-        style={style}
-        disabled={disabled}
-        readOnly={readOnly}
-        value={inputValue}
-        onChange={(e) => handleChange(e)}
-        onBlur={(e) => handleBlur(e)}
-        onFocus={(e) => handleFocus(e)}
-        onCompositionEnd={() => {
-          compositionRef.current = false
-        }}
-        onCompositionStart={() => {
-          compositionRef.current = true
-        }}
-        rows={rows}
-        maxLength={maxLength === -1 ? undefined : maxLength}
-        placeholder={placeholder || locale.placeholder}
-        {...rest}
-      />
-      {showCount && (
-        <div
-          className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
-        >
-          {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
-        </div>
-      )}
-    </div>
+    </>
   )
 }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1561226a68..51c52e5c40 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -561,22 +561,16 @@ $input-background-color: var(
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 // textarea（✅）
-// $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
 $textarea-padding: var(--nutui-textarea-padding, 12px) !default;
-// $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text-help) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  $color-title
+  $color-primary
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
   20px
 ) !default;
-// $textarea-disabled-color: var(
-//   --nutui-textarea-disabled-color,
-//   $color-text-disabled
-// ) !default;
 
 // inputnumber（✅）
 $inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;

From 6229151453c5a61ea4b0e4055fedbcc712c0f64b Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 19:23:03 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?,=E5=8E=BB=E6=8E=89demo=E4=B8=AD=E6=97=A0=E7=94=A8=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 migrate-from-v2.md                         | 2 ++
 src/packages/textarea/demos/taro/demo2.tsx | 8 +-------
 src/packages/textarea/demos/taro/demo3.tsx | 2 +-
 src/packages/textarea/demos/taro/demo4.tsx | 2 +-
 src/packages/textarea/demos/taro/demo5.tsx | 2 +-
 src/packages/textarea/demos/taro/demo6.tsx | 2 +-
 src/packages/textarea/demos/taro/demo7.tsx | 1 -
 src/packages/textarea/demos/taro/demo8.tsx | 1 -
 src/packages/textarea/doc.en-US.md         | 6 +++---
 src/packages/textarea/doc.md               | 8 ++++----
 src/packages/textarea/doc.taro.md          | 6 +++---
 src/packages/textarea/doc.zh-TW.md         | 6 +++---
 12 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 369d5cfb76..fb4a91230f 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -517,6 +517,8 @@ plugins: [
 #### TextArea
 
 - 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
+- 新增 `status` 属性，值为 `default` | `error`，可定义输入框的状态；
+- 新增 `message` 属性，当status为error时，展示错误信息；
 - 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
diff --git a/src/packages/textarea/demos/taro/demo2.tsx b/src/packages/textarea/demos/taro/demo2.tsx
index 0a770359c4..f843bfd247 100644
--- a/src/packages/textarea/demos/taro/demo2.tsx
+++ b/src/packages/textarea/demos/taro/demo2.tsx
@@ -3,12 +3,6 @@ import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [value, setValue] = useState('')
-  return (
-    <TextArea
-      value={value}
-      onChange={(value) => setValue(value)}
-      type="container"
-    />
-  )
+  return <TextArea value={value} onChange={(value) => setValue(value)} />
 }
 export default Demo2
diff --git a/src/packages/textarea/demos/taro/demo3.tsx b/src/packages/textarea/demos/taro/demo3.tsx
index 45ffcc1f2f..9b33c14fcd 100644
--- a/src/packages/textarea/demos/taro/demo3.tsx
+++ b/src/packages/textarea/demos/taro/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <TextArea showCount maxLength={20} type="container" />
+  return <TextArea showCount maxLength={20} />
 }
 export default Demo3
diff --git a/src/packages/textarea/demos/taro/demo4.tsx b/src/packages/textarea/demos/taro/demo4.tsx
index 40b3737a08..266513d773 100644
--- a/src/packages/textarea/demos/taro/demo4.tsx
+++ b/src/packages/textarea/demos/taro/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <TextArea autoSize maxLength={-1} type="container" />
+  return <TextArea autoSize maxLength={-1} />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/taro/demo5.tsx b/src/packages/textarea/demos/taro/demo5.tsx
index 5d3658b68c..d197f1ee46 100644
--- a/src/packages/textarea/demos/taro/demo5.tsx
+++ b/src/packages/textarea/demos/taro/demo5.tsx
@@ -8,7 +8,7 @@ const Demo5 = () => {
   }
   return (
     <ConfigProvider theme={customTheme}>
-      <TextArea showCount maxLength={20} type="container" />
+      <TextArea showCount maxLength={20} />
     </ConfigProvider>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo6.tsx b/src/packages/textarea/demos/taro/demo6.tsx
index 409f705656..950a3086e2 100644
--- a/src/packages/textarea/demos/taro/demo6.tsx
+++ b/src/packages/textarea/demos/taro/demo6.tsx
@@ -4,7 +4,7 @@ import { TextArea } from '@nutui/nutui-react-taro'
 const Demo6 = () => {
   return (
     <>
-      <TextArea readOnly defaultValue="textarea只读状态" type="container" />
+      <TextArea readOnly defaultValue="textarea只读状态" />
     </>
   )
 }
diff --git a/src/packages/textarea/demos/taro/demo7.tsx b/src/packages/textarea/demos/taro/demo7.tsx
index 8487a6ed31..7da8f42c02 100644
--- a/src/packages/textarea/demos/taro/demo7.tsx
+++ b/src/packages/textarea/demos/taro/demo7.tsx
@@ -7,7 +7,6 @@ const Demo7 = () => {
       <TextArea
         disabled
         defaultValue="textarea禁用状态"
-        type="container"
         showCount
         maxLength={20}
       />
diff --git a/src/packages/textarea/demos/taro/demo8.tsx b/src/packages/textarea/demos/taro/demo8.tsx
index afc2198726..f6b73fe9bf 100644
--- a/src/packages/textarea/demos/taro/demo8.tsx
+++ b/src/packages/textarea/demos/taro/demo8.tsx
@@ -5,7 +5,6 @@ const Demo8 = () => {
   return (
     <TextArea
       defaultValue="文本居右"
-      type="container"
       style={{
         textAlign: 'right',
       }}
diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md
index 4fed75f56c..78f7afe770 100644
--- a/src/packages/textarea/doc.en-US.md
+++ b/src/packages/textarea/doc.en-US.md
@@ -89,6 +89,9 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | whether to adapt the content height. | `boolean` | `false` |
 | readOnly | read only attribute | `boolean` | `false` |
 | disabled | disable attribute | `boolean` | `false` |
+| plain | mark textarea's container type, false is for `container`, true is for `纯文本型` | `boolean` | `false` |
+| status | textarea status, with default and error | `default /\ error` | `default` |
+| message | textarea description | `string` | `` |
 | onChange | Triggered when the value of the input box changes | `(value) => void` | `-` |
 | onFocus | Triggered when focusing | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | Triggered when out of focus | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
@@ -101,9 +104,6 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-textarea-font | fontSize | `$font-size-base` |
 | \--nutui-textarea-padding | padding | `10px 25px` |
-| \--nutui-textarea-limit-color | limit color | `$color-text` |
 | \--nutui-textarea-text-color | text color | `$color-title` |
 | \--nutui-textarea-text-curror-color | caret color | `$color-title` |
-| \--nutui-textarea-disabled-color | disabled color | `$color-text-disabled` |
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
index 829f6d59c3..055b1af98f 100644
--- a/src/packages/textarea/doc.md
+++ b/src/packages/textarea/doc.md
@@ -89,6 +89,9 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只读属性 | `boolean` | `false` |
 | disabled | 禁用属性 | `boolean` | `false` |
+| plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
+| status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
+| message | 文本域描述，搭配error状态使用 | `string` | `` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | 失焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
@@ -101,9 +104,6 @@ import { TextArea } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 内边距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
-| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
+| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-primary` |
diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md
index 9040ac8e67..c69b3054cb 100644
--- a/src/packages/textarea/doc.taro.md
+++ b/src/packages/textarea/doc.taro.md
@@ -89,6 +89,9 @@ import { TextArea } from '@nutui/nutui-react-taro'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只读属性 | `boolean` | `false` |
 | disabled | 禁用属性 | `boolean` | `false` |
+| plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
+| status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
+| message | 文本域描述，搭配error状态使用 | `string` | `` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event) => void` | `-` |
 | onBlur | 失焦时触发 | `(event) => void` | `-` |
@@ -101,9 +104,6 @@ import { TextArea } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 内边距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md
index eaf6bfb943..5777055b92 100644
--- a/src/packages/textarea/doc.zh-TW.md
+++ b/src/packages/textarea/doc.zh-TW.md
@@ -88,6 +88,9 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只讀屬性 | `boolean` | `false` |
 | disabled | 禁用屬性 | `boolean` | `false` |
+| plain | 標記文本域的容器類型，false 為容器型 `container`, true 為 `純文本型` | `boolean` | `false` |
+| status | 文本域狀態，可標記為 默認狀態 和 錯誤狀態 | `default /\ error` | `default` |
+| message | 文本域描述，搭配error狀態使用 | `string` | `` |
 | onChange | 輸入內容時觸發 | `(value) => void` | `-` |
 | onFocus | 聚焦時觸發 | `(event) => void` | `-` |
 | onBlur | 失焦時觸發 | `(event) => void` | `-` |
@@ -100,9 +103,6 @@ import { TextArea } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字體大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 內邊距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字數統計顏色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本顏色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disabled` |

From 4c684e0e9dcbebbba6bd0a76adec8715e31593a6 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 19:25:40 +0800
Subject: [PATCH 4/5] fix: test

---
 .../textarea/__test__/__snapshots__/textarea.spec.tsx.snap      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
index 8c0e742f0f..76f243f012 100644
--- a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
+++ b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`textarea props test 1`] = `
 <div>
   <div
-    class="nut-textarea nut-textarea-plain"
+    class="nut-textarea nut-textarea-container nut-textarea-default"
   >
     <textarea
       class="nut-textarea-textarea "

From 606d59f0332582c6dd4208074a5b62ab00ce73d8 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 20:55:56 +0800
Subject: [PATCH 5/5] fix: cr fixed

---
 migrate-from-v2.md                         | 1 -
 src/packages/textarea/demos/h5/demo9.tsx   | 8 +-------
 src/packages/textarea/demos/taro/demo9.tsx | 8 +-------
 src/packages/textarea/doc.en-US.md         | 1 -
 src/packages/textarea/doc.md               | 1 -
 src/packages/textarea/doc.taro.md          | 1 -
 src/packages/textarea/doc.zh-TW.md         | 1 -
 src/packages/textarea/textarea.scss        | 7 -------
 src/packages/textarea/textarea.taro.tsx    | 6 ------
 src/packages/textarea/textarea.tsx         | 6 ------
 10 files changed, 2 insertions(+), 38 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index fb4a91230f..b797b19646 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -518,7 +518,6 @@ plugins: [
 
 - 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
 - 新增 `status` 属性，值为 `default` | `error`，可定义输入框的状态；
-- 新增 `message` 属性，当status为error时，展示错误信息；
 - 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
diff --git a/src/packages/textarea/demos/h5/demo9.tsx b/src/packages/textarea/demos/h5/demo9.tsx
index 4ad9c60643..064dbb5808 100644
--- a/src/packages/textarea/demos/h5/demo9.tsx
+++ b/src/packages/textarea/demos/h5/demo9.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo8 = () => {
-  return (
-    <TextArea
-      status="error"
-      defaultValue="输入内容错误"
-      message="输入内容错误"
-    />
-  )
+  return <TextArea status="error" defaultValue="输入内容错误" />
 }
 export default Demo8
diff --git a/src/packages/textarea/demos/taro/demo9.tsx b/src/packages/textarea/demos/taro/demo9.tsx
index 00aab687f6..d433660b45 100644
--- a/src/packages/textarea/demos/taro/demo9.tsx
+++ b/src/packages/textarea/demos/taro/demo9.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
-  return (
-    <TextArea
-      status="error"
-      defaultValue="输入内容错误"
-      message="输入内容错误"
-    />
-  )
+  return <TextArea status="error" defaultValue="输入内容错误" />
 }
 export default Demo8
diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md
index 78f7afe770..36d8dc28fd 100644
--- a/src/packages/textarea/doc.en-US.md
+++ b/src/packages/textarea/doc.en-US.md
@@ -91,7 +91,6 @@ import { TextArea } from '@nutui/nutui-react'
 | disabled | disable attribute | `boolean` | `false` |
 | plain | mark textarea's container type, false is for `container`, true is for `纯文本型` | `boolean` | `false` |
 | status | textarea status, with default and error | `default /\ error` | `default` |
-| message | textarea description | `string` | `` |
 | onChange | Triggered when the value of the input box changes | `(value) => void` | `-` |
 | onFocus | Triggered when focusing | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | Triggered when out of focus | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
index 055b1af98f..ee0e7c9a57 100644
--- a/src/packages/textarea/doc.md
+++ b/src/packages/textarea/doc.md
@@ -91,7 +91,6 @@ import { TextArea } from '@nutui/nutui-react'
 | disabled | 禁用属性 | `boolean` | `false` |
 | plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
 | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
-| message | 文本域描述，搭配error状态使用 | `string` | `` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | 失焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md
index c69b3054cb..fd3939cc67 100644
--- a/src/packages/textarea/doc.taro.md
+++ b/src/packages/textarea/doc.taro.md
@@ -91,7 +91,6 @@ import { TextArea } from '@nutui/nutui-react-taro'
 | disabled | 禁用属性 | `boolean` | `false` |
 | plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
 | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
-| message | 文本域描述，搭配error状态使用 | `string` | `` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event) => void` | `-` |
 | onBlur | 失焦时触发 | `(event) => void` | `-` |
diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md
index 5777055b92..241be06395 100644
--- a/src/packages/textarea/doc.zh-TW.md
+++ b/src/packages/textarea/doc.zh-TW.md
@@ -90,7 +90,6 @@ import { TextArea } from '@nutui/nutui-react'
 | disabled | 禁用屬性 | `boolean` | `false` |
 | plain | 標記文本域的容器類型，false 為容器型 `container`, true 為 `純文本型` | `boolean` | `false` |
 | status | 文本域狀態，可標記為 默認狀態 和 錯誤狀態 | `default /\ error` | `default` |
-| message | 文本域描述，搭配error狀態使用 | `string` | `` |
 | onChange | 輸入內容時觸發 | `(value) => void` | `-` |
 | onFocus | 聚焦時觸發 | `(event) => void` | `-` |
 | onBlur | 失焦時觸發 | `(event) => void` | `-` |
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index fe1756c117..ed09b1816a 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -29,13 +29,6 @@
     }
   }
 
-  &-description {
-    color: $color-danger;
-    margin-top: $spacing-base;
-    margin-left: $spacing-xxs;
-    font-size: $font-size-s;
-  }
-
   &-textarea {
     outline: none;
     display: block;
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
index 48f8dce753..e31aab6edb 100644
--- a/src/packages/textarea/textarea.taro.tsx
+++ b/src/packages/textarea/textarea.taro.tsx
@@ -23,7 +23,6 @@ export interface TextAreaProps
   autoSize: boolean
   plain: boolean
   status: 'error' | 'default'
-  message: string
   onChange: (value: string) => void
   onBlur: (event: Event) => void
   onFocus: (event: Event) => void
@@ -40,7 +39,6 @@ const defaultProps = {
   autoSize: false,
   plain: false,
   status: 'default',
-  message: '',
 } as TextAreaProps
 export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   const { locale } = useConfig()
@@ -58,7 +56,6 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     style,
     plain,
     status,
-    message,
     onChange,
     onBlur,
     onFocus,
@@ -151,9 +148,6 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
           </Text>
         )}
       </View>
-      {status === 'error' && message && (
-        <View className={`${classPrefix}-description`}>{message}</View>
-      )}
     </>
   )
 }
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
index 6bb900f35b..15f2f4a4b4 100644
--- a/src/packages/textarea/textarea.tsx
+++ b/src/packages/textarea/textarea.tsx
@@ -17,7 +17,6 @@ export interface TextAreaProps extends BasicComponent {
   autoSize: boolean
   plain: boolean
   status: 'error' | 'default'
-  message: string
   onChange: (value: string) => void
   onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
   onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
@@ -35,7 +34,6 @@ const defaultProps = {
   autoSize: false,
   plain: false,
   status: 'default',
-  message: '',
 } as TextAreaProps
 export const TextArea: FunctionComponent<
   Partial<TextAreaProps> &
@@ -59,7 +57,6 @@ export const TextArea: FunctionComponent<
     style,
     plain,
     status,
-    message,
     onChange,
     onBlur,
     onFocus,
@@ -162,9 +159,6 @@ export const TextArea: FunctionComponent<
           </div>
         )}
       </div>
-      {status === 'error' && message && (
-        <div className={`${classPrefix}-description`}>{message}</div>
-      )}
     </>
   )
 }