diff --git a/tdesign/desktop/site/src/components/web/textarea/index.tsx b/tdesign/desktop/site/src/components/web/textarea/index.tsx
index 7d53f20c6a..2093b6c30f 100644
--- a/tdesign/desktop/site/src/components/web/textarea/index.tsx
+++ b/tdesign/desktop/site/src/components/web/textarea/index.tsx
@@ -49,7 +49,8 @@ define(
       tab: 'demo',
     }
 
-    static css = `code {
+    static css = `
+    code {
       margin: 0 2px;
       color: var(--error-8);
       background: var(--error-1);
@@ -57,7 +58,20 @@ define(
       padding: 2px 6px;
       font-size: 12px;
       word-break: break-word;
-    }`
+    }
+    
+    .tdesign-demo-item__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-wrap: wrap;
+      min-height: 204px;
+      padding: 40px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      overflow: auto;
+    }
+    `
 
     tab = ['demo', 'api', 'design']
     tdDocHeader = createRef()
@@ -87,34 +101,179 @@ define(
       return (
         <>
           <td-doc-tabs ref={this.tdDocTabs} tab={this.props.tab} style="display:block"></td-doc-tabs>
+          
           <div style={this.isShow('demo')} name="DEMO">
-            <h3 id='基本多行文本框'>
-              基本多行文本框 <a class="header-anchor" href="#基本多行文本框"></a></h3>
+          <td-doc-usage
+            language="markup"
+            panel="textarea"
+            code='<t-textarea
+  allowInputOverMax={false}
+  autofocus={false}
+  autosize={false}
+  placeholder="请输入内容"
+  readonly={false}
+/>'
+          >
+            <div slot="textarea" style="width: 100%; display: flex; align-items: center; justify-content: center;">
+              <t-textarea placeholder="请输入内容" style="width: 100%;"></t-textarea>
+            </div>
+          </td-doc-usage>
+
+
+
+            <h3 id="基本多行文本框">
+              基本多行文本框 <a class="header-anchor" href="#基本多行文本框"></a>
+            </h3>
             <p>用于多行文本的输入。</p>
-            <demo-wrapper>
-              <textarea-base></textarea-base>
-            </demo-wrapper>
+            <td-doc-demo 
+            code='import { OmiProps, WeElement, h, tag, render } from "omi"
+import "../index"
+
+@tag("textarea-base")
+export default class TextareaBase extends WeElement{
+  render(){
+    return <h.f>
+      <t-textarea placeholder="请输入描述文案"></t-textarea>
+      <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
+      <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
+    </h.f>
+  }
+}' language="jsx" mode="auto">
+            <div class='tdesign-demo-item__body'>
+              <div style="width: 100%;">
+                <textarea-base></textarea-base>
+              </div>
+            </div>
+            </td-doc-demo>
+
 
-            <h3 id='限制最大字符数'>
-            限制最大字符数 <a class="header-anchor" href="#限制最大字符数"></a></h3>
+            
+            <h3 id="限制最大字符数">
+              限制最大字符数 <a class="header-anchor" href="#限制最大字符数"></a>
+            </h3>
             <p>用于多行文本的输入。</p>
-            <demo-wrapper>
-              <textarea-limit></textarea-limit>
-            </demo-wrapper>
-
-            <h3 id='绑定 DOM 事件'>
-            绑定 DOM 事件 <a class="header-anchor" href="#绑定 DOM 事件"></a></h3>
-            <p>可绑定 <code>onKeypress</code> <code>onKeydown</code> <code>onKeyup</code> <code>onFocus</code> <code>onBlur</code> 等 DOM 原生事件。</p>
-            <demo-wrapper>
-              <textarea-event></textarea-event>
-            </demo-wrapper>
-
-            <h3 id='不同状态的多行文本框'>
-            不同状态的多行文本框 <a class="header-anchor" href="#不同状态的多行文本框"></a></h3>
+            <td-doc-demo code='import { OmiProps, WeElement, h, tag, render } from "omi"
+
+import "../index"
+import "../../space/index"
+
+@tag("textarea-limit")
+export default class TextareaLimit extends WeElement{
+
+  render(){
+    return <h.f>
+      <t-space direction="vertical" style={{ width: 100% }}>
+        <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+        <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+      </t-space>
+    </h.f>
+    
+  }
+}' language="jsx" mode="auto">   
+              <div class='tdesign-demo-item__body'>
+                <div style="width: 100%;">
+                  <textarea-limit></textarea-limit>
+                </div>
+              </div>
+            </td-doc-demo>
+
+
+            <h3 id="绑定 DOM 事件">
+              绑定 DOM 事件 <a class="header-anchor" href="#绑定 DOM 事件"></a>
+            </h3>
+            <p>
+              可绑定 <code>onKeypress</code> <code>onKeydown</code> <code>onKeyup</code> <code>onFocus</code>{' '}
+              <code>onBlur</code> 等 DOM 原生事件。
+            </p>
+
+            <td-doc-demo
+            code='import { OmiProps, WeElement, h, tag, render} from "omi"
+import "../index"
+
+@tag("textarea-event")
+export default class TextareaEvent extends WeElement {
+
+  evtDetail: number
+  value :string
+  
+  onBlur = (evt : Event) =>{
+    console.log("onBlur", evt.detail.value, evt.detail.event)
+  }
+
+  onFocus = (evt : Event) =>{
+    console.log("onFocus", evt.detail.value, evt.detail.event)
+  }
+
+  onKeyup = (evt : Event) =>{
+    console.log("onKeyup", evt.detail.value, evt.detail.event)
+  }
+
+  onKeypress = (evt : Event) =>{
+    console.log("onKeypress", evt.detail.value, evt.detail.event)
+  }
+
+  onKeydown = (evt : Event) =>{
+    console.log("onKeydown", evt.detail.value, evt.detail.event)
+  }
+
+  render() {
+    return (
+      <h.f>
+        <t-textarea
+          placeholder="请输入"
+          // value={this.value}
+          onMyBlur={this.onBlur}
+          onMyFocus={this.onFocus}
+          onMyKeypress={this.onKeypress}
+          onMyKeydown={this.onKeydown}
+          onMyKeyup={this.onKeyup}
+        ></t-textarea>
+      </h.f>
+    )
+  }
+}' language="jsx" mode="auto">
+
+              <div class='tdesign-demo-item__body'>
+                <div style="width: 100%;">
+                  <textarea-event></textarea-event>
+                </div>
+              </div>
+            </td-doc-demo>
+
+            <h3 id="不同状态的多行文本框">
+              不同状态的多行文本框 <a class="header-anchor" href="#不同状态的多行文本框"></a>
+            </h3>
             <p>支持只读、禁用状态。</p>
-            <demo-wrapper>
-              <textarea-status></textarea-status>
-            </demo-wrapper>
+
+            <td-doc-demo 
+            code='import { OmiProps, WeElement, h, tag, render } from "omi"
+
+import "../index"
+import "../../space/index"
+
+@tag("textarea-status")
+export default class TextareaStatus extends WeElement{
+
+  render(){
+    return <h.f>
+      <t-space direction="vertical" style={{ width: "100%" }}>
+        <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
+        <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
+        <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
+        <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
+        <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
+        <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+        </t-space>
+    </h.f>
+  }
+}'
+            language="jsx" mode="auto">
+              <div class='tdesign-demo-item__body'>
+                <div style="width: 100%;">
+                  <textarea-status></textarea-status>
+                </div>
+              </div>
+            </td-doc-demo>
           </div>
           <div style={this.isShow('api')} name="API">
             <div
diff --git a/tdesign/desktop/site/src/meta.ts b/tdesign/desktop/site/src/meta.ts
index 41e6f6eb87..0503f761ee 100644
--- a/tdesign/desktop/site/src/meta.ts
+++ b/tdesign/desktop/site/src/meta.ts
@@ -118,6 +118,20 @@ const metaData = new Map([
       description: '用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。',
     },
   ],
+  [
+    'list',
+    {
+      title: 'List 列表',
+      description: '列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。',
+    },
+  ],
+  [
+    'back-top',
+    {
+      title: 'BackTop 返回顶部',
+      description: '用于返回页面顶部',
+    },
+  ],
 ])
 
 const getMetaData = (componentName: string) => {
diff --git a/tdesign/desktop/src/textarea/_example/base.tsx b/tdesign/desktop/src/textarea/_example/base.tsx
index 0fdb56bafa..6ed8b07d93 100644
--- a/tdesign/desktop/src/textarea/_example/base.tsx
+++ b/tdesign/desktop/src/textarea/_example/base.tsx
@@ -1,21 +1,17 @@
 import { OmiProps, WeElement, h, tag, render } from 'omi'
-
 import "../index"
-
+import "../../space/index"
 @tag("textarea-base")
 export default class TextareaBase extends WeElement{
-  static css = `t-textarea {
-    margin : 10px;
-  }`
 
   render(){
     
     return <h.f>
-      <t-textarea placeholder="请输入描述文案"></t-textarea>
-      <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
-      <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
-      {/* <t-textarea placeholder="请输入你的文本" autosize={true}></t-textarea>
-      <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea> */}
+      <t-space direction="vertical" style={{ width: '100%' }}>
+        <t-textarea placeholder="请输入描述文案"></t-textarea>
+        <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
+        <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
+      </t-space>
     </h.f>
     
   }
diff --git a/tdesign/desktop/src/textarea/_example/event.tsx b/tdesign/desktop/src/textarea/_example/event.tsx
index a52da6078d..3abee82d74 100644
--- a/tdesign/desktop/src/textarea/_example/event.tsx
+++ b/tdesign/desktop/src/textarea/_example/event.tsx
@@ -1,25 +1,13 @@
-import Install from '@src/icon/install'
 import { OmiProps, WeElement, h, tag, render} from 'omi'
 
 import '../index'
 
 @tag('textarea-event')
 export default class TextareaEvent extends WeElement {
-  static css = `t-textarea {
-    margin : 10px;
-  }`
-
-  // onKeypress(value:string, e:any) {
-  //   console.log('onKeypress: ', value, e);
-  // }
 
   evtDetail: number
   value :string
   
-  
-  installed(){
-    
-  }
   onBlur = (evt : Event) =>{
     console.log('onBlur', evt.detail.value, evt.detail.event)
   }
@@ -40,7 +28,6 @@ export default class TextareaEvent extends WeElement {
     console.log('onKeydown', evt.detail.value, evt.detail.event)
   }
 
-
   render() {
     return (
       <h.f>
diff --git a/tdesign/desktop/src/textarea/_example/limit.tsx b/tdesign/desktop/src/textarea/_example/limit.tsx
index 84380160a5..41e7e38dcc 100644
--- a/tdesign/desktop/src/textarea/_example/limit.tsx
+++ b/tdesign/desktop/src/textarea/_example/limit.tsx
@@ -1,18 +1,18 @@
 import { OmiProps, WeElement, h, tag, render } from 'omi'
 
 import "../index"
+import "../../space/index"
 
 @tag("textarea-limit")
 export default class TextareaLimit extends WeElement{
-  static css = `t-textarea {
-    margin : 10px;
-  }`
+
 
   render(){
-    
     return <h.f>
-      <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
-      <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+      <t-space direction="vertical" style={{ width: '100%' }}>
+        <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+        <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+      </t-space>
     </h.f>
     
   }
diff --git a/tdesign/desktop/src/textarea/_example/status.tsx b/tdesign/desktop/src/textarea/_example/status.tsx
index 285b0e86d5..44339fca21 100644
--- a/tdesign/desktop/src/textarea/_example/status.tsx
+++ b/tdesign/desktop/src/textarea/_example/status.tsx
@@ -1,22 +1,21 @@
-import { OmiProps, WeElement, h, tag, render } from 'omi'
+import { OmiProps, WeElement, h, tag, render } from "omi"
 
 import "../index"
+import "../../space/index"
 
 @tag("textarea-status")
 export default class TextareaStatus extends WeElement{
-  static css = `t-textarea {
-    margin : 10px;
-  }`
 
   render(){
-    
     return <h.f>
-      <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
-      <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
-      <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
-      <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
-      <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
-      <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+      <t-space direction="vertical" style={{ width: "100%" }}>
+        <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
+        <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
+        <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
+        <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
+        <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
+        <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+        </t-space>
     </h.f>
   }
 }