From 0bd4ccb99907a4b181b189eba557f1e5b7483011 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 26 Jun 2024 18:18:48 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix(price):=20demo=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/price/demo.taro.tsx        | 29 ++++++-------------------
 src/packages/price/demo.tsx             | 29 ++++++-------------------
 src/packages/price/demos/h5/demo2.tsx   |  8 +++++--
 src/packages/price/demos/h5/demo3.tsx   |  8 +++++--
 src/packages/price/demos/h5/demo4.tsx   |  8 +++++--
 src/packages/price/demos/h5/demo5.tsx   | 18 ++++++++-------
 src/packages/price/demos/h5/demo6.tsx   |  8 +++++--
 src/packages/price/demos/h5/demo7.tsx   |  8 +++++--
 src/packages/price/demos/h5/demo8.tsx   |  6 ++---
 src/packages/price/demos/taro/demo2.tsx |  8 +++++--
 src/packages/price/demos/taro/demo3.tsx |  8 +++++--
 src/packages/price/demos/taro/demo4.tsx |  8 +++++--
 src/packages/price/demos/taro/demo5.tsx | 18 ++++++++-------
 src/packages/price/demos/taro/demo6.tsx |  8 +++++--
 src/packages/price/demos/taro/demo7.tsx |  8 +++++--
 src/packages/price/demos/taro/demo8.tsx | 19 ++++------------
 16 files changed, 101 insertions(+), 98 deletions(-)

diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx
index 7e8b54c313..6a3eec9f03 100644
--- a/src/packages/price/demo.taro.tsx
+++ b/src/packages/price/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -54,33 +53,19 @@ const PriceDemo = () => {
         <View className="h2">{translated.title1}</View>
         <Demo1 />
         <View className="h2">{translated.title2}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.title3}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <View className="h2">{translated.title4}</View>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <View className="h2">{translated.title5}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.title7}</View>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
         <View className="h2">{translated.title6}</View>
-        <Cell>
-          <Demo7 />
-        </Cell>
+        <Demo7 />
         <View className="h2">{translated.title8}</View>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        <Demo8 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx
index 63197d434f..28db3583b3 100644
--- a/src/packages/price/demo.tsx
+++ b/src/packages/price/demo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Cell } from '../cell/cell'
 import { useTranslate } from '@/sites/assets/locale'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
@@ -50,33 +49,19 @@ const PriceDemo = () => {
       <h2>{translated.title1}</h2>
       <Demo1 />
       <h2>{translated.title2}</h2>
-      <Cell>
-        <Demo2 />
-      </Cell>
+      <Demo2 />
       <h2>{translated.title3}</h2>
-      <Cell>
-        <Demo3 />
-      </Cell>
+      <Demo3 />
       <h2>{translated.title4}</h2>
-      <Cell>
-        <Demo4 />
-      </Cell>
+      <Demo4 />
       <h2>{translated.title5}</h2>
-      <Cell>
-        <Demo5 />
-      </Cell>
+      <Demo5 />
       <h2>{translated.title7}</h2>
-      <Cell>
-        <Demo6 />
-      </Cell>
+      <Demo6 />
       <h2>{translated.title6}</h2>
-      <Cell>
-        <Demo7 />
-      </Cell>
+      <Demo7 />
       <h2>{translated.title8}</h2>
-      <Cell>
-        <Demo8 />
-      </Cell>
+      <Demo8 />
     </div>
   )
 }
diff --git a/src/packages/price/demos/h5/demo2.tsx b/src/packages/price/demos/h5/demo2.tsx
index ad89a29764..fa16698314 100644
--- a/src/packages/price/demos/h5/demo2.tsx
+++ b/src/packages/price/demos/h5/demo2.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  return <Price price={8888} digits={0} size="normal" thousands />
+  return (
+    <Cell>
+      <Price price={8888} digits={0} size="normal" thousands />
+    </Cell>
+  )
 }
 export default Demo2
diff --git a/src/packages/price/demos/h5/demo3.tsx b/src/packages/price/demos/h5/demo3.tsx
index 85a9997dae..60b46ccf9f 100644
--- a/src/packages/price/demos/h5/demo3.tsx
+++ b/src/packages/price/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Price price={10010.01} size="normal" thousands={false} />
+  return (
+    <Cell>
+      <Price price={10010.01} size="normal" thousands={false} />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/price/demos/h5/demo4.tsx b/src/packages/price/demos/h5/demo4.tsx
index ddeab9e852..34904db1d3 100644
--- a/src/packages/price/demos/h5/demo4.tsx
+++ b/src/packages/price/demos/h5/demo4.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Price, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  return <Price price={15213.1221} size="normal" digits={3} thousands />
+  return (
+    <Cell>
+      <Price price={15213.1221} size="normal" digits={3} thousands />
+    </Cell>
+  )
 }
 export default Demo4
diff --git a/src/packages/price/demos/h5/demo5.tsx b/src/packages/price/demos/h5/demo5.tsx
index 9e42838906..efda097104 100644
--- a/src/packages/price/demos/h5/demo5.tsx
+++ b/src/packages/price/demos/h5/demo5.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <Price
-      price={8888.01}
-      size="normal"
-      position="after"
-      symbol="元"
-      thousands
-    />
+    <Cell>
+      <Price
+        price={8888.01}
+        size="normal"
+        position="after"
+        symbol="元"
+        thousands
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/price/demos/h5/demo6.tsx b/src/packages/price/demos/h5/demo6.tsx
index 307f1809a6..914071c963 100644
--- a/src/packages/price/demos/h5/demo6.tsx
+++ b/src/packages/price/demos/h5/demo6.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo6 = () => {
-  return <Price price={15213.1221} size="normal" symbol="" />
+  return (
+    <Cell>
+      <Price price={15213.1221} size="normal" symbol="" />
+    </Cell>
+  )
 }
 export default Demo6
diff --git a/src/packages/price/demos/h5/demo7.tsx b/src/packages/price/demos/h5/demo7.tsx
index ba77fc8667..8c6bca6e44 100644
--- a/src/packages/price/demos/h5/demo7.tsx
+++ b/src/packages/price/demos/h5/demo7.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo7 = () => {
   const [price, setPrice] = useState(Math.random() * 10000000)
@@ -12,6 +12,10 @@ const Demo7 = () => {
       clearInterval(timer)
     }
   }, [])
-  return <Price price={price} digits={3} size="normal" thousands />
+  return (
+    <Cell>
+      <Price price={price} digits={3} size="normal" thousands />
+    </Cell>
+  )
 }
 export default Demo7
diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx
index e5c220fa91..b7f0c82e8d 100644
--- a/src/packages/price/demos/h5/demo8.tsx
+++ b/src/packages/price/demos/h5/demo8.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react'
+import { Cell, Price } from '@nutui/nutui-react'
 
 const Demo8 = () => {
   return (
-    <>
+    <Cell>
       <Price price={1513.12} size="normal" thousands />
       <span>&nbsp;</span>
       <Price price={1513.88} thousands line />
-    </>
+    </Cell>
   )
 }
 export default Demo8
diff --git a/src/packages/price/demos/taro/demo2.tsx b/src/packages/price/demos/taro/demo2.tsx
index b51e78d0c5..ad47a89ec3 100644
--- a/src/packages/price/demos/taro/demo2.tsx
+++ b/src/packages/price/demos/taro/demo2.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
-  return <Price price={8888} digits={0} size="normal" thousands />
+  return (
+    <Cell>
+      <Price price={8888} digits={0} size="normal" thousands />
+    </Cell>
+  )
 }
 export default Demo2
diff --git a/src/packages/price/demos/taro/demo3.tsx b/src/packages/price/demos/taro/demo3.tsx
index 32a53f16b2..7a60184001 100644
--- a/src/packages/price/demos/taro/demo3.tsx
+++ b/src/packages/price/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Price price={10010.01} size="normal" thousands={false} />
+  return (
+    <Cell>
+      <Price price={10010.01} size="normal" thousands={false} />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/price/demos/taro/demo4.tsx b/src/packages/price/demos/taro/demo4.tsx
index 9c6f13915d..12bba9ecdf 100644
--- a/src/packages/price/demos/taro/demo4.tsx
+++ b/src/packages/price/demos/taro/demo4.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <Price price={15213.1221} size="normal" digits={3} thousands />
+  return (
+    <Cell>
+      <Price price={15213.1221} size="normal" digits={3} thousands />
+    </Cell>
+  )
 }
 export default Demo4
diff --git a/src/packages/price/demos/taro/demo5.tsx b/src/packages/price/demos/taro/demo5.tsx
index ec2aa63d1b..99d7d22d9a 100644
--- a/src/packages/price/demos/taro/demo5.tsx
+++ b/src/packages/price/demos/taro/demo5.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
   return (
-    <Price
-      price={8888.01}
-      size="normal"
-      position="after"
-      symbol="元"
-      thousands
-    />
+    <Cell>
+      <Price
+        price={8888.01}
+        size="normal"
+        position="after"
+        symbol="元"
+        thousands
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/price/demos/taro/demo6.tsx b/src/packages/price/demos/taro/demo6.tsx
index bf092b6494..00fa1639c6 100644
--- a/src/packages/price/demos/taro/demo6.tsx
+++ b/src/packages/price/demos/taro/demo6.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
-  return <Price price={15213.1221} size="normal" symbol="" />
+  return (
+    <Cell>
+      <Price price={15213.1221} size="normal" symbol="" />
+    </Cell>
+  )
 }
 export default Demo6
diff --git a/src/packages/price/demos/taro/demo7.tsx b/src/packages/price/demos/taro/demo7.tsx
index 841caca0af..eb423cc18f 100644
--- a/src/packages/price/demos/taro/demo7.tsx
+++ b/src/packages/price/demos/taro/demo7.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Price } from '@nutui/nutui-react-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
 
 const Demo7 = () => {
   const [price, setPrice] = useState(Math.random() * 10000000)
@@ -12,6 +12,10 @@ const Demo7 = () => {
       clearInterval(timer)
     }
   }, [])
-  return <Price price={price} digits={3} size="normal" thousands />
+  return (
+    <Cell>
+      <Price price={price} digits={3} size="normal" thousands />
+    </Cell>
+  )
 }
 export default Demo7
diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx
index 1de0473d8c..706db12db0 100644
--- a/src/packages/price/demos/taro/demo8.tsx
+++ b/src/packages/price/demos/taro/demo8.tsx
@@ -1,25 +1,14 @@
 import React from 'react'
-import { Price } from '@nutui/nutui-react-taro'
-import { Text, View } from '@tarojs/components'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { Cell, Price } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
 
 const Demo8 = () => {
   return (
-    <View
-      style={
-        harmonyAndRn()
-          ? {
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }
-          : {}
-      }
-    >
+    <Cell align="center">
       <Price price={1513.12} size="normal" thousands />
       <Text>&nbsp;</Text>
       <Price price={1513.88} thousands line />
-    </View>
+    </Cell>
   )
 }
 export default Demo8

From 9f247c6dd406c7a7c6158cfbe6e0e28574396c51 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 26 Jun 2024 20:17:07 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix(countdown):=20demo=E4=B8=AD=E5=B7=B2?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E7=BB=84=E4=BB=B6=E4=B8=8D=E5=9C=A8=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/countdown/demo.scss            |  5 --
 src/packages/countdown/demo.taro.tsx        |  1 -
 src/packages/countdown/demo.tsx             |  1 -
 src/packages/countdown/demos/h5/demo9.tsx   | 16 +++----
 src/packages/countdown/demos/taro/demo8.tsx |  1 -
 src/packages/countdown/demos/taro/demo9.tsx | 53 +++++----------------
 6 files changed, 19 insertions(+), 58 deletions(-)
 delete mode 100644 src/packages/countdown/demo.scss

diff --git a/src/packages/countdown/demo.scss b/src/packages/countdown/demo.scss
deleted file mode 100644
index 9c8dba38d9..0000000000
--- a/src/packages/countdown/demo.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.demo-countdown {
-  .nut-grid-item-content {
-    border: 0 !important;
-  }
-}
diff --git a/src/packages/countdown/demo.taro.tsx b/src/packages/countdown/demo.taro.tsx
index 90ea2b13fd..96e9b36c2a 100644
--- a/src/packages/countdown/demo.taro.tsx
+++ b/src/packages/countdown/demo.taro.tsx
@@ -3,7 +3,6 @@ import Taro from '@tarojs/taro'
 import { View, ScrollView } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import './demo.scss'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
diff --git a/src/packages/countdown/demo.tsx b/src/packages/countdown/demo.tsx
index 15d9880dfb..1c2c047e3c 100644
--- a/src/packages/countdown/demo.tsx
+++ b/src/packages/countdown/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import './demo.scss'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
diff --git a/src/packages/countdown/demos/h5/demo9.tsx b/src/packages/countdown/demos/h5/demo9.tsx
index 994f8e906d..9ac864375e 100644
--- a/src/packages/countdown/demos/h5/demo9.tsx
+++ b/src/packages/countdown/demos/h5/demo9.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Cell, CountDown, Grid, GridItem, Button } from '@nutui/nutui-react'
+import { Cell, CountDown, Grid, Button } from '@nutui/nutui-react'
 
 interface countdownRefState {
   start: () => void
@@ -31,22 +31,22 @@ const Demo9 = () => {
           ref={countDownRef}
         />
       </Cell>
-      <Grid columns="3" style={{ marginBottom: '5px' }}>
-        <GridItem>
+      <Grid columns={3} style={{ marginBottom: '5px' }}>
+        <Grid.Item>
           <Button type="primary" onClick={start}>
             开始
           </Button>
-        </GridItem>
-        <GridItem>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={pause}>
             暂停
           </Button>
-        </GridItem>
-        <GridItem>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={reset}>
             重置
           </Button>
-        </GridItem>
+        </Grid.Item>
       </Grid>
     </>
   )
diff --git a/src/packages/countdown/demos/taro/demo8.tsx b/src/packages/countdown/demos/taro/demo8.tsx
index d631ddf47d..34bf360b11 100644
--- a/src/packages/countdown/demos/taro/demo8.tsx
+++ b/src/packages/countdown/demos/taro/demo8.tsx
@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { Cell, CountDown } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
-import '../../demo.scss'
 import pxTransform from '@/utils/px-transform'
 
 const partItemStyle = {
diff --git a/src/packages/countdown/demos/taro/demo9.tsx b/src/packages/countdown/demos/taro/demo9.tsx
index 3346a7ffe5..b3d057a529 100644
--- a/src/packages/countdown/demos/taro/demo9.tsx
+++ b/src/packages/countdown/demos/taro/demo9.tsx
@@ -1,13 +1,6 @@
 import React, { useRef } from 'react'
-import {
-  Cell,
-  CountDown,
-  Button,
-  Grid,
-  GridItem,
-} from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { Cell, CountDown, Button, Grid } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 interface countdownRefState {
   start: () => void
@@ -39,48 +32,24 @@ const Demo9 = () => {
           ref={countDownRef}
         />
       </Cell>
-      {/* TODO：gird未适配，适配后替换 */}
-      {Taro.getEnv() === Taro.ENV_TYPE.RN ? (
-        <View
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-            paddingTop: 16,
-            paddingBottom: 16,
-            marginBottom: 20,
-            backgroundColor: '#fff',
-          }}
-        >
+
+      <Grid columns={3} style={{ marginBottom: pxTransform(5) }}>
+        <Grid.Item>
           <Button type="primary" onClick={start}>
             开始
           </Button>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={pause}>
             暂停
           </Button>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={reset}>
             重置
           </Button>
-        </View>
-      ) : (
-        <Grid columns="3" style={{ marginBottom: '5px' }}>
-          <GridItem>
-            <Button type="primary" onClick={start}>
-              开始
-            </Button>
-          </GridItem>
-          <GridItem>
-            <Button type="primary" onClick={pause}>
-              暂停
-            </Button>
-          </GridItem>
-          <GridItem>
-            <Button type="primary" onClick={reset}>
-              重置
-            </Button>
-          </GridItem>
-        </Grid>
-      )}
+        </Grid.Item>
+      </Grid>
     </>
   )
 }

From 8747782f0b23fa5d75d231bef90c2f505e410e78 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 27 Jun 2024 10:13:52 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20demo=E5=A2=9E=E5=8A=A0header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/resultpage/demo.taro.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/packages/resultpage/demo.taro.tsx b/src/packages/resultpage/demo.taro.tsx
index 8644d807a0..9db17f32ed 100644
--- a/src/packages/resultpage/demo.taro.tsx
+++ b/src/packages/resultpage/demo.taro.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
+import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -33,6 +34,7 @@ const ResultPageDemo = () => {
   })
   return (
     <>
+      <Header />
       <ScrollView className="demo">
         <View className="h2">{translated.basic}</View>
         <Demo1 />

From b67661d88c71aeae97e70f3ede18d281c28cfd7b Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 27 Jun 2024 10:39:45 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix(divider):=20demo=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/divider/demo.taro.tsx        | 21 +++++----------------
 src/packages/divider/demo.tsx             | 21 +++++----------------
 src/packages/divider/demos/h5/demo1.tsx   |  6 +++---
 src/packages/divider/demos/h5/demo2.tsx   |  6 +++---
 src/packages/divider/demos/h5/demo4.tsx   |  6 +++---
 src/packages/divider/demos/h5/demo5.tsx   |  6 +++---
 src/packages/divider/demos/h5/demo6.tsx   |  6 +++---
 src/packages/divider/demos/taro/demo1.tsx |  6 +++---
 src/packages/divider/demos/taro/demo2.tsx |  6 +++---
 src/packages/divider/demos/taro/demo4.tsx |  8 ++++++--
 src/packages/divider/demos/taro/demo5.tsx |  6 +++---
 src/packages/divider/demos/taro/demo6.tsx |  6 +++---
 12 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/src/packages/divider/demo.taro.tsx b/src/packages/divider/demo.taro.tsx
index 1d382c0cdc..fe662ae926 100644
--- a/src/packages/divider/demo.taro.tsx
+++ b/src/packages/divider/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -35,32 +34,22 @@ const DividerDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.withText}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.contentPosition}</View>
         <Demo3 />
         {/* RN unsupported dashed / dotted border style */}
         {Taro.getEnv() !== 'RN' ? (
           <>
             <View className="h2">{translated.dashed}</View>
-            <Cell>
-              <Demo4 />
-            </Cell>
+            <Demo4 />
           </>
         ) : null}
         <View className="h2">{translated.customStyle}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.verticalDivider}</View>
-        <Cell align="center">
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/divider/demo.tsx b/src/packages/divider/demo.tsx
index 4f13bdca89..3603ab5d82 100644
--- a/src/packages/divider/demo.tsx
+++ b/src/packages/divider/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import Cell from '@/packages/cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -31,27 +30,17 @@ const DividerDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.withText}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.contentPosition}</h2>
         <Demo3 />
         <h2>{translated.dashed}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customStyle}</h2>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.verticalDivider}</h2>
-        <Cell align="center">
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </div>
     </>
   )
diff --git a/src/packages/divider/demos/h5/demo1.tsx b/src/packages/divider/demos/h5/demo1.tsx
index 0c5fcf3194..366f47afa6 100644
--- a/src/packages/divider/demos/h5/demo1.tsx
+++ b/src/packages/divider/demos/h5/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Divider />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/divider/demos/h5/demo2.tsx b/src/packages/divider/demos/h5/demo2.tsx
index 373d52ff44..ee5ca24179 100644
--- a/src/packages/divider/demos/h5/demo2.tsx
+++ b/src/packages/divider/demos/h5/demo2.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <>
+    <Cell>
       <Divider>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/divider/demos/h5/demo4.tsx b/src/packages/divider/demos/h5/demo4.tsx
index eb21f574d1..0c161731ac 100644
--- a/src/packages/divider/demos/h5/demo4.tsx
+++ b/src/packages/divider/demos/h5/demo4.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <>
+    <Cell>
       <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/divider/demos/h5/demo5.tsx b/src/packages/divider/demos/h5/demo5.tsx
index d6a5da72a8..37b3bce82c 100644
--- a/src/packages/divider/demos/h5/demo5.tsx
+++ b/src/packages/divider/demos/h5/demo5.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <>
+    <Cell>
       <Divider
         style={{
           color: '#1989fa',
@@ -14,7 +14,7 @@ const Demo5 = () => {
       >
         文本
       </Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/divider/demos/h5/demo6.tsx b/src/packages/divider/demos/h5/demo6.tsx
index 69612b79f1..d6a07cc116 100644
--- a/src/packages/divider/demos/h5/demo6.tsx
+++ b/src/packages/divider/demos/h5/demo6.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell align="center">
       文本
       <Divider direction="vertical" />
       <a href="#" style={{ color: '#1989fa' }}>
@@ -13,7 +13,7 @@ const Demo6 = () => {
       <a href="#" style={{ color: '#1989fa' }}>
         链接
       </a>
-    </>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/divider/demos/taro/demo1.tsx b/src/packages/divider/demos/taro/demo1.tsx
index 1a11faf3d2..d08cbf7d24 100644
--- a/src/packages/divider/demos/taro/demo1.tsx
+++ b/src/packages/divider/demos/taro/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Divider />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/divider/demos/taro/demo2.tsx b/src/packages/divider/demos/taro/demo2.tsx
index bdf98f1178..c8f5b46795 100644
--- a/src/packages/divider/demos/taro/demo2.tsx
+++ b/src/packages/divider/demos/taro/demo2.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <>
+    <Cell>
       <Divider>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/divider/demos/taro/demo4.tsx b/src/packages/divider/demos/taro/demo4.tsx
index 0becf8e018..ef01c70f40 100644
--- a/src/packages/divider/demos/taro/demo4.tsx
+++ b/src/packages/divider/demos/taro/demo4.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+  return (
+    <Cell>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </Cell>
+  )
 }
 export default Demo4
diff --git a/src/packages/divider/demos/taro/demo5.tsx b/src/packages/divider/demos/taro/demo5.tsx
index f8c80f9dae..0ace139cc3 100644
--- a/src/packages/divider/demos/taro/demo5.tsx
+++ b/src/packages/divider/demos/taro/demo5.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 import { rn } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   return (
-    <>
+    <Cell>
       <Divider
         style={{
           color: '#1989fa',
@@ -17,7 +17,7 @@ const Demo5 = () => {
       >
         文本
       </Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/divider/demos/taro/demo6.tsx b/src/packages/divider/demos/taro/demo6.tsx
index 747f787825..c25278d64f 100644
--- a/src/packages/divider/demos/taro/demo6.tsx
+++ b/src/packages/divider/demos/taro/demo6.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 import { Text } from '@tarojs/components'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell align="center">
       <Text>文本</Text>
       <Divider direction="vertical" />
       <Text style={{ color: '#1989fa' }}>链接</Text>
       <Divider direction="vertical" />
       <Text style={{ color: '#1989fa' }}>链接</Text>
-    </>
+    </Cell>
   )
 }
 export default Demo6

From 93088cb5466bfaa212106e8c0a564a7af7b32386 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 27 Jun 2024 10:45:33 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix(switch):=20demo=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/demo.taro.tsx        | 25 ++++++------------------
 src/packages/switch/demo.tsx             | 25 ++++++------------------
 src/packages/switch/demos/h5/demo1.tsx   |  6 +++---
 src/packages/switch/demos/h5/demo2.tsx   |  6 +++---
 src/packages/switch/demos/h5/demo3.tsx   |  6 +++---
 src/packages/switch/demos/h5/demo4.tsx   |  6 +++---
 src/packages/switch/demos/h5/demo5.tsx   | 18 +++++++++--------
 src/packages/switch/demos/h5/demo6.tsx   |  6 +++---
 src/packages/switch/demos/taro/demo1.tsx |  6 +++---
 src/packages/switch/demos/taro/demo2.tsx |  6 +++---
 src/packages/switch/demos/taro/demo3.tsx |  6 +++---
 src/packages/switch/demos/taro/demo4.tsx |  6 +++---
 src/packages/switch/demos/taro/demo5.tsx | 18 +++++++++--------
 src/packages/switch/demos/taro/demo6.tsx |  6 +++---
 14 files changed, 62 insertions(+), 84 deletions(-)

diff --git a/src/packages/switch/demo.taro.tsx b/src/packages/switch/demo.taro.tsx
index 7c3763e1a5..2b9b40326c 100644
--- a/src/packages/switch/demo.taro.tsx
+++ b/src/packages/switch/demo.taro.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale//taro'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -40,29 +39,17 @@ const SwitchDemo = () => {
     <>
       <View className="demo">
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.asyncControl}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.disabled}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <View className="h2">{translated.eventTip}</View>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <View className="h2">{translated.customColor}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.supportText}</View>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </View>
     </>
   )
diff --git a/src/packages/switch/demo.tsx b/src/packages/switch/demo.tsx
index f1b37f721f..89e3addecf 100644
--- a/src/packages/switch/demo.tsx
+++ b/src/packages/switch/demo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Cell } from '@nutui/nutui-react'
 import { useTranslate } from '@/sites/assets/locale'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
@@ -39,29 +38,17 @@ const SwitchDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.asyncControl}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.disabled}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.eventTip}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customColor}</h2>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.supportText}</h2>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </div>
     </>
   )
diff --git a/src/packages/switch/demos/h5/demo1.tsx b/src/packages/switch/demos/h5/demo1.tsx
index 206f33fa73..0c32efae71 100644
--- a/src/packages/switch/demos/h5/demo1.tsx
+++ b/src/packages/switch/demos/h5/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react'
+import { Cell, Switch } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/switch/demos/h5/demo2.tsx b/src/packages/switch/demos/h5/demo2.tsx
index 62d11e482b..faf4eaeb7f 100644
--- a/src/packages/switch/demos/h5/demo2.tsx
+++ b/src/packages/switch/demos/h5/demo2.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Switch, Toast } from '@nutui/nutui-react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
@@ -11,12 +11,12 @@ const Demo2 = () => {
     }, 2000)
   }
   return (
-    <>
+    <Cell>
       <Switch
         checked={checkedAsync}
         onChange={(value, event) => onChangeAsync(value, event)}
       />
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/switch/demos/h5/demo3.tsx b/src/packages/switch/demos/h5/demo3.tsx
index bd9739e3ca..4de798d2f2 100644
--- a/src/packages/switch/demos/h5/demo3.tsx
+++ b/src/packages/switch/demos/h5/demo3.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react'
+import { Cell, Switch } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked disabled />
-    </>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/switch/demos/h5/demo4.tsx b/src/packages/switch/demos/h5/demo4.tsx
index f3c622204d..f646c3c033 100644
--- a/src/packages/switch/demos/h5/demo4.tsx
+++ b/src/packages/switch/demos/h5/demo4.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Switch, Toast } from '@nutui/nutui-react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   const onChange = (value: boolean, event: any) => {
     Toast.show(`触发了onChange事件，开关状态：${value}`)
   }
   return (
-    <>
+    <Cell>
       <Switch
         defaultChecked
         onChange={(value, event) => onChange(value, event)}
       />
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/switch/demos/h5/demo5.tsx b/src/packages/switch/demos/h5/demo5.tsx
index e31169fd2c..0ff258eaea 100644
--- a/src/packages/switch/demos/h5/demo5.tsx
+++ b/src/packages/switch/demos/h5/demo5.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react'
+import { Cell, Switch } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <Switch
-      defaultChecked
-      style={{
-        '--nutui-switch-open-background-color': 'blue',
-        '--nutui-switch-close-line-background-color': '#ebebeb',
-      }}
-    />
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/switch/demos/h5/demo6.tsx b/src/packages/switch/demos/h5/demo6.tsx
index 7096719ccd..09881801d2 100644
--- a/src/packages/switch/demos/h5/demo6.tsx
+++ b/src/packages/switch/demos/h5/demo6.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react'
+import { Cell, Switch } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked activeText="开" inactiveText="关" />
-    </>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/switch/demos/taro/demo1.tsx b/src/packages/switch/demos/taro/demo1.tsx
index fcd2464864..1d2fd07208 100644
--- a/src/packages/switch/demos/taro/demo1.tsx
+++ b/src/packages/switch/demos/taro/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/switch/demos/taro/demo2.tsx b/src/packages/switch/demos/taro/demo2.tsx
index 6cc6c0e41c..a2f856042e 100644
--- a/src/packages/switch/demos/taro/demo2.tsx
+++ b/src/packages/switch/demos/taro/demo2.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 
 const Demo2 = () => {
@@ -12,12 +12,12 @@ const Demo2 = () => {
     }, 2000)
   }
   return (
-    <>
+    <Cell>
       <Switch
         checked={checkedAsync}
         onChange={(value, event) => onChangeAsync(value, event)}
       />
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/switch/demos/taro/demo3.tsx b/src/packages/switch/demos/taro/demo3.tsx
index 23eb7891b4..6cb94c6667 100644
--- a/src/packages/switch/demos/taro/demo3.tsx
+++ b/src/packages/switch/demos/taro/demo3.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked disabled />
-    </>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/switch/demos/taro/demo4.tsx b/src/packages/switch/demos/taro/demo4.tsx
index 782dcf7bbc..c779c6f803 100644
--- a/src/packages/switch/demos/taro/demo4.tsx
+++ b/src/packages/switch/demos/taro/demo4.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 
 const Demo4 = () => {
@@ -10,12 +10,12 @@ const Demo4 = () => {
     Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
   }
   return (
-    <>
+    <Cell>
       <Switch
         defaultChecked
         onChange={(value, event) => onChange(value, event)}
       />
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/switch/demos/taro/demo5.tsx b/src/packages/switch/demos/taro/demo5.tsx
index 14ef08aebe..6761f71e1b 100644
--- a/src/packages/switch/demos/taro/demo5.tsx
+++ b/src/packages/switch/demos/taro/demo5.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
   return (
-    <Switch
-      defaultChecked
-      style={{
-        '--nutui-switch-open-background-color': 'blue',
-        '--nutui-switch-close-line-background-color': '#ebebeb',
-      }}
-    />
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/switch/demos/taro/demo6.tsx b/src/packages/switch/demos/taro/demo6.tsx
index 3defdd7b67..efee6dbb4b 100644
--- a/src/packages/switch/demos/taro/demo6.tsx
+++ b/src/packages/switch/demos/taro/demo6.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell>
       <Switch defaultChecked activeText="开" inactiveText="关" />
-    </>
+    </Cell>
   )
 }
 export default Demo6