diff --git a/src/packages/button/demo.taro.tsx b/src/packages/button/demo.taro.tsx
index 94d02645b7..0dcec4a548 100644
--- a/src/packages/button/demo.taro.tsx
+++ b/src/packages/button/demo.taro.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
@@ -14,36 +14,8 @@ import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
 
-interface T {
-  ce5c5446: string
-  ce5c5447: string
-  c38a08ef: string
-  b840c88f: string
-  b840c881: string
-  b840c882: string
-  a74a1fd4: string
-  '8dab2f66': string
-  cfbdc781: string
-  c3a3a1d2: string
-  e51e4582: string
-  '7db1a8b2': string
-  a52bef0c: string
-  d04fcbda: string
-  '0aaad622': string
-  '0aaad620': string
-  '60a53514': string
-  b8a453e3: string
-  '248be9e1': string
-  ea3d02f2: string
-  ea379d01: string
-  c9e6df49: string
-  '781b07fd': string
-  '1076d771': string
-  '6ab47cd2': string
-}
-
 const ButtonDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '按钮类型',
       ce5c5447: '按钮形状',
@@ -126,11 +98,6 @@ const ButtonDemo = () => {
       '6ab47cd2': 'Gradient button',
     },
   })
-  const openType: any = Taro.getEnv() === 'WEB' ? {} : { openType: 'share' }
-  const openSetting: any =
-    Taro.getEnv() === 'WEB' ? {} : { openType: 'openSetting' }
-  const [loading, setLoading] = useState(false)
-  const marginStyle = { margin: 8 }
   return (
     <>
       <Header />
@@ -143,12 +110,10 @@ const ButtonDemo = () => {
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo2 />
         </Cell>
-
         <h2>{translated.e51e4582}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo3 />
         </Cell>
-
         <h2>{translated['0aaad622']}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo4 />
@@ -165,7 +130,6 @@ const ButtonDemo = () => {
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo7 />
         </Cell>
-
         <h2>{translated['0aaad620']}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo8 />
@@ -174,9 +138,7 @@ const ButtonDemo = () => {
         <Cell>
           <Demo9 />
         </Cell>
-
         <h2>{translated['781b07fd']}</h2>
-
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo10 />
         </Cell>
diff --git a/src/packages/button/demo.tsx b/src/packages/button/demo.tsx
index 95c9d960cc..19a95f9e0e 100644
--- a/src/packages/button/demo.tsx
+++ b/src/packages/button/demo.tsx
@@ -11,36 +11,8 @@ import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
 
-interface T {
-  ce5c5446: string
-  ce5c5447: string
-  c38a08ef: string
-  b840c88f: string
-  b840c881: string
-  b840c882: string
-  a74a1fd4: string
-  '8dab2f66': string
-  cfbdc781: string
-  c3a3a1d2: string
-  e51e4582: string
-  '7db1a8b2': string
-  a52bef0c: string
-  d04fcbda: string
-  '0aaad622': string
-  '0aaad620': string
-  '60a53514': string
-  b8a453e3: string
-  '248be9e1': string
-  ea3d02f2: string
-  ea379d01: string
-  c9e6df49: string
-  '781b07fd': string
-  '1076d771': string
-  '6ab47cd2': string
-}
-
 const ButtonDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '按钮类型',
       ce5c5447: '按钮形状',
@@ -131,17 +103,14 @@ const ButtonDemo = () => {
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo1 />
         </Cell>
-
         <h2>{translated.e51e4582}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo2 />
         </Cell>
-
         <h2>{translated['0aaad622']}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo3 />
         </Cell>
-
         <h2>{translated['7db1a8b2']}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo4 />
@@ -154,7 +123,6 @@ const ButtonDemo = () => {
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo6 />
         </Cell>
-
         <h2>{translated['0aaad620']}</h2>
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo7 />
@@ -163,9 +131,7 @@ const ButtonDemo = () => {
         <Cell>
           <Demo8 />
         </Cell>
-
         <h2>{translated['781b07fd']}</h2>
-
         <Cell style={{ flexWrap: 'wrap' }}>
           <Demo9 />
         </Cell>
diff --git a/src/packages/safearea/demo.taro.tsx b/src/packages/safearea/demo.taro.tsx
index 6c1205eb04..2562f0ef63 100644
--- a/src/packages/safearea/demo.taro.tsx
+++ b/src/packages/safearea/demo.taro.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { SafeArea } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
+import Demo1 from './demos/taro/demo1'
 
 const SafeAreaDemo = () => {
   const [translated] = useTranslate({
@@ -17,28 +17,12 @@ const SafeAreaDemo = () => {
     },
   })
 
-  function generateRandomTextArray(count: number) {
-    const characters = 'abcdefghijklmnopqrstuvwxyz'
-    const textArray = []
-    for (let j = 0; j < count; j++) {
-      const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
-      let randomText = ''
-      for (let i = 0; i < randomLength; i++) {
-        const randomIndex = Math.floor(Math.random() * characters.length)
-        randomText += characters.charAt(randomIndex)
-      }
-      textArray.push(randomText)
-    }
-    return textArray
-  }
-
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
-        <div>{generateRandomTextArray(900).join(' ')}</div>
-        <SafeArea position="bottom" />
+        <Demo1 />
       </div>
     </>
   )
diff --git a/src/packages/safearea/demo.tsx b/src/packages/safearea/demo.tsx
index 02a9e882d8..9c9bf326b8 100644
--- a/src/packages/safearea/demo.tsx
+++ b/src/packages/safearea/demo.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { SafeArea } from './safearea'
 import { useTranslate } from '@/sites/assets/locale'
+import Demo1 from './demos/h5/demo1'
 
 const SafeAreaDemo = () => {
   const [translated] = useTranslate({
@@ -15,27 +15,11 @@ const SafeAreaDemo = () => {
     },
   })
 
-  function generateRandomTextArray(count: number) {
-    const characters = 'abcdefghijklmnopqrstuvwxyz'
-    const textArray = []
-    for (let j = 0; j < count; j++) {
-      const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
-      let randomText = ''
-      for (let i = 0; i < randomLength; i++) {
-        const randomIndex = Math.floor(Math.random() * characters.length)
-        randomText += characters.charAt(randomIndex)
-      }
-      textArray.push(randomText)
-    }
-    return textArray
-  }
-
   return (
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <div>{generateRandomTextArray(900).join(' ')}</div>
-        <SafeArea position="bottom" />
+        <Demo1 />
       </div>
     </>
   )
diff --git a/src/packages/safearea/demos/h5/demo1.tsx b/src/packages/safearea/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..0d91580ab5
--- /dev/null
+++ b/src/packages/safearea/demos/h5/demo1.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { SafeArea } from '@nutui/nutui-react'
+
+function generateRandomTextArray(count: number) {
+  const characters = 'abcdefghijklmnopqrstuvwxyz'
+  const textArray = []
+  for (let j = 0; j < count; j++) {
+    const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
+    let randomText = ''
+    for (let i = 0; i < randomLength; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length)
+      randomText += characters.charAt(randomIndex)
+    }
+    textArray.push(randomText)
+  }
+  return textArray
+}
+
+const Demo1 = () => {
+  return (
+    <>
+      <div>{generateRandomTextArray(900).join(' ')}</div>
+      <SafeArea position="bottom" />
+    </>
+  )
+}
+
+export default Demo1
diff --git a/src/packages/safearea/demos/taro/demo1.tsx b/src/packages/safearea/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..edd9b18796
--- /dev/null
+++ b/src/packages/safearea/demos/taro/demo1.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { SafeArea } from '@nutui/nutui-react-taro'
+
+function generateRandomTextArray(count: number) {
+  const characters = 'abcdefghijklmnopqrstuvwxyz'
+  const textArray = []
+  for (let j = 0; j < count; j++) {
+    const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
+    let randomText = ''
+    for (let i = 0; i < randomLength; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length)
+      randomText += characters.charAt(randomIndex)
+    }
+    textArray.push(randomText)
+  }
+  return textArray
+}
+
+const Demo1 = () => {
+  return (
+    <>
+      <div>{generateRandomTextArray(900).join(' ')}</div>
+      <SafeArea position="bottom" />
+    </>
+  )
+}
+
+export default Demo1
diff --git a/src/packages/safearea/doc.en-US.md b/src/packages/safearea/doc.en-US.md
index eb97513348..63b438bf28 100644
--- a/src/packages/safearea/doc.en-US.md
+++ b/src/packages/safearea/doc.en-US.md
@@ -15,38 +15,10 @@ import { SafeArea } from '@nutui/nutui-react';
 
 ### Basic Usage
 
-:::demo
-
-```tsx
-import React from 'react'
-import { SafeArea } from '@nutui/nutui-react'
-
-function generateRandomTextArray(count) {
-  const characters = 'abcdefghijklmnopqrstuvwxyz'
-  const textArray = []
-  for (let j = 0; j < count; j++) {
-    const randomLength = Math.floor(Math.random() * 5) + 4
-    let randomText = ''
-    for (let i = 0; i < randomLength; i++) {
-      const randomIndex = Math.floor(Math.random() * characters.length)
-      randomText += characters.charAt(randomIndex)
-    }
-    textArray.push(randomText)
-  }
-  return textArray
-}
-const App = () => {
-  return (
-    <>
-      <div>{generateRandomTextArray(900).join(' ')}</div>
-      <SafeArea position="bottom" />
-    </>
-  )
-}
-export default App
-
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 
diff --git a/src/packages/safearea/doc.md b/src/packages/safearea/doc.md
index a7b6c0bce4..777336b7f0 100644
--- a/src/packages/safearea/doc.md
+++ b/src/packages/safearea/doc.md
@@ -14,38 +14,10 @@ import { SafeArea } from '@nutui/nutui-react';
 
 ### 基础用法
 
-:::demo
-
-```tsx
-import React from 'react'
-import { SafeArea } from '@nutui/nutui-react'
-
-function generateRandomTextArray(count) {
-  const characters = 'abcdefghijklmnopqrstuvwxyz'
-  const textArray = []
-  for (let j = 0; j < count; j++) {
-    const randomLength = Math.floor(Math.random() * 5) + 4
-    let randomText = ''
-    for (let i = 0; i < randomLength; i++) {
-      const randomIndex = Math.floor(Math.random() * characters.length)
-      randomText += characters.charAt(randomIndex)
-    }
-    textArray.push(randomText)
-  }
-  return textArray
-}
-const App = () => {
-  return (
-    <>
-      <div>{generateRandomTextArray(900).join(' ')}</div>
-      <SafeArea position="bottom" />
-    </>
-  )
-}
-export default App
-
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 
diff --git a/src/packages/safearea/doc.taro.md b/src/packages/safearea/doc.taro.md
index b5d1450e14..cf84643adf 100644
--- a/src/packages/safearea/doc.taro.md
+++ b/src/packages/safearea/doc.taro.md
@@ -14,38 +14,10 @@ import { SafeArea } from '@nutui/nutui-react-taro';
 
 ### 基础用法
 
-:::demo
-
-```tsx
-import React from 'react'
-import { SafeArea } from '@nutui/nutui-react-taro'
-
-function generateRandomTextArray(count) {
-  const characters = 'abcdefghijklmnopqrstuvwxyz'
-  const textArray = []
-  for (let j = 0; j < count; j++) {
-    const randomLength = Math.floor(Math.random() * 5) + 4
-    let randomText = ''
-    for (let i = 0; i < randomLength; i++) {
-      const randomIndex = Math.floor(Math.random() * characters.length)
-      randomText += characters.charAt(randomIndex)
-    }
-    textArray.push(randomText)
-  }
-  return textArray
-}
-const App = () => {
-  return (
-    <>
-      <div>{generateRandomTextArray(900).join(' ')}</div>
-      <SafeArea position="bottom" />
-    </>
-  )
-}
-export default App
-
-```
-
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
+
 :::
 
 
diff --git a/src/packages/safearea/doc.zh-TW.md b/src/packages/safearea/doc.zh-TW.md
index 946d221167..8ec104a2d5 100644
--- a/src/packages/safearea/doc.zh-TW.md
+++ b/src/packages/safearea/doc.zh-TW.md
@@ -14,38 +14,10 @@ import { SafeArea } from '@nutui/nutui-react';
 
 ### 基礎用法
 
-:::demo
-
-```tsx
-import React from 'react'
-import { SafeArea } from '@nutui/nutui-react'
-
-function generateRandomTextArray(count) {
-  const characters = 'abcdefghijklmnopqrstuvwxyz'
-  const textArray = []
-  for (let j = 0; j < count; j++) {
-    const randomLength = Math.floor(Math.random() * 5) + 4
-    let randomText = ''
-    for (let i = 0; i < randomLength; i++) {
-      const randomIndex = Math.floor(Math.random() * characters.length)
-      randomText += characters.charAt(randomIndex)
-    }
-    textArray.push(randomText)
-  }
-  return textArray
-}
-const App = () => {
-  return (
-    <>
-      <div>{generateRandomTextArray(900).join(' ')}</div>
-      <SafeArea position="bottom" />
-    </>
-  )
-}
-export default App
-
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::