diff --git a/src/packages/barrage/demo.taro.tsx b/src/packages/barrage/demo.taro.tsx
index 327668e3e4..3a12606743 100644
--- a/src/packages/barrage/demo.taro.tsx
+++ b/src/packages/barrage/demo.taro.tsx
@@ -1,81 +1,24 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import { Button, Cell, Barrage } from '@/packages/nutui.react.taro'
 import '@/packages/barrage/demo.scss'
 import Header from '@/sites/components/header'
 
-interface barrageRefState {
-  add: (word: string) => void
-}
+import Demo1 from './demos/taro/demo1'
 
-interface T {
-  ed8c172b: string
-  ae9cd4a0: string
-  ab05020c: string
-  bc555a83: string
-  '4d14b3e0': string
-  '448f995e': string
-  '75ca4f92': string
-  '84aa6bce': string
-  '3d9b2794': string
-}
 const BarrageDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
-      ed8c172b: '画美不看画美不看画美不看画美不看',
-      ae9cd4a0: '不明觉厉',
-      ab05020c: '喜大普奔',
-      bc555a83: '男默女泪',
-      '4d14b3e0': '累觉不爱',
-      '448f995e': '爷青结',
-      '75ca4f92': '随机——',
       '84aa6bce': '基础用法',
-      '3d9b2794': '随机添加',
     },
     'zh-TW': {
-      ed8c172b: '畫美不看畫美不看畫美不看畫美不看',
-      ae9cd4a0: '不明覺厲',
-      ab05020c: '喜大普奔',
-      bc555a83: '男默女淚',
-      '4d14b3e0': '累覺不愛',
-      '448f995e': '爺青結',
-      '75ca4f92': '隨機——',
       '84aa6bce': '基礎用法',
-      '3d9b2794': '隨機添加',
     },
     'en-US': {
-      ed8c172b: 'beautiful painting',
-      ae9cd4a0: 'Unconsciously',
-      ab05020c: 'Super Plus enjoy',
-      bc555a83: 'male silent female tears',
-      '4d14b3e0': 'Tired of not loving',
-      '448f995e': 'Ye Qing knot-',
-      '75ca4f92': 'random--',
       '84aa6bce': 'Basic usage',
-      '3d9b2794': 'add randomly',
     },
   })
 
-  const barrageList = [
-    translated.ed8c172b,
-    translated.ae9cd4a0,
-    translated.ab05020c,
-    translated.bc555a83,
-    translated['4d14b3e0'],
-    translated['448f995e'],
-  ]
-
-  const barrageRef = useRef<barrageRefState>(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(
-        `${translated['75ca4f92']}${String(n).substr(2, 10)}`
-      )
-    }
-  }
-
   return (
     <>
       <Header />
@@ -83,18 +26,7 @@ const BarrageDemo = () => {
         className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} demo-barrage`}
       >
         <h2>{translated['84aa6bce']}</h2>
-        <Cell className="barrage-demo-wrap">
-          <Barrage
-            className="barrage-demo"
-            ref={barrageRef}
-            list={barrageList}
-          />
-        </Cell>
-        <div className="test" style={{ textAlign: 'center' }}>
-          <Button type="primary" onClick={addBarrage}>
-            {translated['3d9b2794']}
-          </Button>
-        </div>
+        <Demo1 />
       </div>
     </>
   )
diff --git a/src/packages/barrage/demo.tsx b/src/packages/barrage/demo.tsx
index 1fd41f7cf9..10cef2d155 100644
--- a/src/packages/barrage/demo.tsx
+++ b/src/packages/barrage/demo.tsx
@@ -1,97 +1,27 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import Cell from '@/packages/cell'
-import { Barrage } from './barrage'
-import Button from '@/packages/button'
 import './demo.scss?module'
 
-interface barrageRefState {
-  add: (word: string) => void
-}
+import Demo1 from './demos/h5/demo1'
 
-interface T {
-  ed8c172b: string
-  ae9cd4a0: string
-  ab05020c: string
-  bc555a83: string
-  '4d14b3e0': string
-  '448f995e': string
-  '75ca4f92': string
-  '84aa6bce': string
-  '3d9b2794': string
-}
 const BarrageDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
-      ed8c172b: '画美不看画美不看画美不看画美不看',
-      ae9cd4a0: '不明觉厉',
-      ab05020c: '喜大普奔',
-      bc555a83: '男默女泪',
-      '4d14b3e0': '累觉不爱',
-      '448f995e': '爷青结',
-      '75ca4f92': '随机——',
       '84aa6bce': '基础用法',
-      '3d9b2794': '随机添加',
     },
     'zh-TW': {
-      ed8c172b: '畫美不看畫美不看畫美不看畫美不看',
-      ae9cd4a0: '不明覺厲',
-      ab05020c: '喜大普奔',
-      bc555a83: '男默女淚',
-      '4d14b3e0': '累覺不愛',
-      '448f995e': '爺青結',
-      '75ca4f92': '隨機——',
       '84aa6bce': '基礎用法',
-      '3d9b2794': '隨機添加',
     },
     'en-US': {
-      ed8c172b: 'beautiful painting',
-      ae9cd4a0: 'Unconsciously',
-      ab05020c: 'Super Plus enjoy',
-      bc555a83: 'male silent female tears',
-      '4d14b3e0': 'Tired of not loving',
-      '448f995e': 'Ye Qing knot',
-      '75ca4f92': 'random--',
       '84aa6bce': 'Basic usage',
-      '3d9b2794': 'add randomly',
     },
   })
 
-  const barrageList = [
-    translated.ed8c172b,
-    translated.ae9cd4a0,
-    translated.ab05020c,
-    translated.bc555a83,
-    translated['4d14b3e0'],
-    translated['448f995e'],
-  ]
-
-  const barrageRef = useRef<barrageRefState>(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(
-        `${translated['75ca4f92']}${String(n).substr(2, 10)}`
-      )
-    }
-  }
-
   return (
     <>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
-        <Cell className="barrage-demo-wrap">
-          <Barrage
-            className="barrage-demo"
-            ref={barrageRef}
-            list={barrageList}
-          />
-        </Cell>
-        <div className="test" style={{ textAlign: 'center' }}>
-          <Button type="primary" onClick={addBarrage}>
-            {translated['3d9b2794']}
-          </Button>
-        </div>
+        <Demo1 />
       </div>
     </>
   )
diff --git a/src/packages/barrage/demos/h5/demo1.tsx b/src/packages/barrage/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..e88acdfc4e
--- /dev/null
+++ b/src/packages/barrage/demos/h5/demo1.tsx
@@ -0,0 +1,33 @@
+import React, { useRef } from 'react'
+import { Cell, Button, Barrage } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  const barrageList = [
+    '画美不看画美不看画美不看画美不看',
+    '不明觉厉',
+    '喜大普奔',
+    '男默女泪',
+    '累觉不爱',
+    '爷青结',
+  ]
+  const barrageRef = useRef<any>(null)
+  const addBarrage = () => {
+    const n = Math.random()
+    if (barrageRef.current) {
+      barrageRef.current.add(`随机——${String(n).substr(2, 10)}`)
+    }
+  }
+  return (
+    <>
+      <Cell className="barrage-demo-wrap">
+        <Barrage className="barrage-demo" ref={barrageRef} list={barrageList} />
+      </Cell>
+      <div className="test" style={{ textAlign: 'center' }}>
+        <Button type="primary" onClick={addBarrage}>
+          随机添加
+        </Button>
+      </div>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/barrage/demos/taro/demo1.tsx b/src/packages/barrage/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..9a68a03ca1
--- /dev/null
+++ b/src/packages/barrage/demos/taro/demo1.tsx
@@ -0,0 +1,33 @@
+import React, { useRef } from 'react'
+import { Cell, Button, Barrage } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  const barrageList = [
+    '画美不看画美不看画美不看画美不看',
+    '不明觉厉',
+    '喜大普奔',
+    '男默女泪',
+    '累觉不爱',
+    '爷青结',
+  ]
+  const barrageRef = useRef<any>(null)
+  const addBarrage = () => {
+    const n = Math.random()
+    if (barrageRef.current) {
+      barrageRef.current.add(`随机——${String(n).substr(2, 10)}`)
+    }
+  }
+  return (
+    <>
+      <Cell className="barrage-demo-wrap">
+        <Barrage className="barrage-demo" ref={barrageRef} list={barrageList} />
+      </Cell>
+      <div className="test" style={{ textAlign: 'center' }}>
+        <Button type="primary" onClick={addBarrage}>
+          随机添加
+        </Button>
+      </div>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/barrage/doc.en-US.md b/src/packages/barrage/doc.en-US.md
index 712eb9b645..a7e65bbfa3 100644
--- a/src/packages/barrage/doc.en-US.md
+++ b/src/packages/barrage/doc.en-US.md
@@ -16,52 +16,7 @@ import { Barrage } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React, { useRef } from 'react'
-import { Cell, Button, Barrage } from '@nutui/nutui-react'
-
-const barrageStyle = {
-  padding: '20px 0',
-  height: '150px',
-  boxSizing: 'border-box',
-}
-const App = () => {
-  const barrageList = [
-    'beautiful painting',
-    'Unconsciously',
-    'Super Plus enjoy',
-    'male silent female tears',
-    'Tired of not loving',
-    'cool-',
-  ]
-  const barrageRef = useRef(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(`random——${String(n).substr(2, 10)}`)
-    }
-  }
-  return (
-    <div className="demo">
-      <h2>Basic usage</h2>
-      <Cell className="barrage-demo-wrap" style={barrageStyle}>
-        <Barrage
-          className="barrage-demo"
-          ref={barrageRef}
-          list={barrageList}
-          style={barrageStyle}
-        />
-      </Cell>
-      <div className="test" style={{ textAlign: 'center' }}>
-        <Button type="danger" onClick={addBarrage}>
-          add randomly
-        </Button>
-      </div>
-    </div>
-  )
-}
-export default App
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/barrage/doc.md b/src/packages/barrage/doc.md
index d327af4995..3fb23a7e8b 100644
--- a/src/packages/barrage/doc.md
+++ b/src/packages/barrage/doc.md
@@ -16,52 +16,7 @@ import { Barrage } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React, { useRef } from 'react'
-import { Cell, Button, Barrage } from '@nutui/nutui-react'
-
-const barrageStyle = {
-  padding: '20px 0',
-  height: '150px',
-  boxSizing: 'border-box',
-}
-const App = () => {
-  const barrageList = [
-    '画美不看',
-    '不明觉厉',
-    '喜大普奔',
-    '男默女泪',
-    '累觉不爱',
-    '爷青结-',
-  ]
-  const barrageRef = useRef(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(`随机——${String(n).substr(2, 10)}`)
-    }
-  }
-  return (
-    <div className="demo">
-      <h2>基础用法</h2>
-      <Cell className="barrage-demo-wrap" style={barrageStyle}>
-        <Barrage
-          className="barrage-demo"
-          ref={barrageRef}
-          list={barrageList}
-          style={barrageStyle}
-        />
-      </Cell>
-      <div className="test" style={{ textAlign: 'center' }}>
-        <Button type="danger" onClick={addBarrage}>
-          随机添加
-        </Button>
-      </div>
-    </div>
-  )
-}
-export default App
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/barrage/doc.taro.md b/src/packages/barrage/doc.taro.md
index 59788159fa..0b248a0b77 100644
--- a/src/packages/barrage/doc.taro.md
+++ b/src/packages/barrage/doc.taro.md
@@ -16,40 +16,7 @@ import { Barrage } from '@nutui/nutui-react-taro';
 
 :::demo
 
-```tsx
-import React, { useRef } from "react";
-import { Cell, Button, Barrage } from '@nutui/nutui-react-taro';
-
-const barrageStyle = {
-  padding: '20px 0',
-  height: '150px',
-  boxSizing: 'border-box'
-}
-const App = () => {
-  const barrageList = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
-  const barrageRef = useRef(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(`随机——${  String(n).substr(2, 10)}`)
-    }
-  }
-  return (
-    <div className="demo">
-      <h2>基础用法</h2>
-      <Cell className="barrage-demo-wrap" style={barrageStyle}>
-        <Barrage className="barrage-demo" ref={barrageRef} list={barrageList} style={barrageStyle} />
-      </Cell>
-      <div className="test" style={{ textAlign: 'center' }}>
-        <Button type="danger" onClick={addBarrage}>
-          随机添加
-        </Button>
-      </div>
-    </div>
-  )
-}
-export default App;
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/barrage/doc.zh-TW.md b/src/packages/barrage/doc.zh-TW.md
index 1c976b93c2..ca78b5ca14 100644
--- a/src/packages/barrage/doc.zh-TW.md
+++ b/src/packages/barrage/doc.zh-TW.md
@@ -16,52 +16,7 @@ import { Barrage } from '@nutui/nutui-react'
 
 :::demo
 
-```tsx
-import React, { useRef } from 'react'
-import { Cell, Button, Barrage } from '@nutui/nutui-react'
-
-const barrageStyle = {
-  padding: '20px 0',
-  height: '150px',
-  boxSizing: 'border-box',
-}
-const App = () => {
-  const barrageList = [
-    '畫美不看',
-    '不明覺厲',
-    '喜大普奔',
-    '男默女淚',
-    '纍覺不愛',
-    '爺青結-',
-  ]
-  const barrageRef = useRef(null)
-  const addBarrage = () => {
-    const n = Math.random()
-    if (barrageRef.current) {
-      barrageRef.current.add(`隨機——${String(n).substr(2, 10)}`)
-    }
-  }
-  return (
-    <div className="demo">
-      <h2>基礎用法</h2>
-      <Cell className="barrage-demo-wrap" style={barrageStyle}>
-        <Barrage
-          className="barrage-demo"
-          ref={barrageRef}
-          list={barrageList}
-          style={barrageStyle}
-        />
-      </Cell>
-      <div className="test" style={{ textAlign: 'center' }}>
-        <Button type="danger" onClick={addBarrage}>
-          隨機添加
-        </Button>
-      </div>
-    </div>
-  )
-}
-export default App
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::