feat: 增加 demo 场景

src/packages/cell/cell.scss

@@ -55,4 +55,14 @@
       content: ' ';
     }
   }
+  &-disabled {
+    display: flex;
+    align-items: center;
+    color: #b5b5b5;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+  }
 }

src/packages/cell/cell.taro.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
 import CellGroupContext from '@/packages/cellgroup/context'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface CellProps extends BasicComponent {
   title: ReactNode
@@ -11,6 +11,7 @@ export interface CellProps extends BasicComponent {
   radius: string | number
   align: 'flex-start' | 'center' | 'flex-end'
   clickable: boolean
+  disabled: boolean
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
@@ -22,6 +23,7 @@ const defaultProps = {
   radius: '6px',
   align: 'flex-start',
   clickable: false,
+  disabled: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
@@ -42,6 +44,7 @@ export const Cell: FunctionComponent<
     className,
     style,
     clickable,
+    disabled,
     ...rest
   } = {
     ...defaultProps,
@@ -66,7 +69,10 @@ export const Cell: FunctionComponent<
         }
   return (
     <div
-      className={`${classNames(classPrefix, className, clickable ? `${classPrefix}-clickable` : '')}`}
+      className={classNames(classPrefix, className, {
+        [`${classPrefix}-clickable`]: clickable,
+        [`${classPrefix}-disabled`]: disabled,
+      })}
       onClick={(event) => handleClick(event)}
       style={baseStyle}
       {...rest}

src/packages/cell/demos/taro/demo1.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { ArrowRight } from '@nutui/icons-react-taro'
 import { Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
 
 const Demo1 = () => {
   const testClick = (
@@ -17,7 +18,16 @@ const Demo1 = () => {
         onClick={(
           event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}
+        extra={
+          <ArrowRight
+            size={14}
+            style={{
+              alignItems: 'center',
+            }}
+          />
+        }
       />
+      <Cell title="禁用状态" disabled extra={<ArrowRight size={14} />} />
       <Cell title="圆角设置0" radius={0} />
     </>
   )

src/packages/cell/demos/taro/demo3.tsx

@@ -1,23 +1,40 @@
-import React from 'react'
+import { ArrowRight, User } from '@nutui/icons-react-taro'
 import { Cell } from '@nutui/nutui-react-taro'
-import { User } from '@nutui/icons-react-taro'
+import React from 'react'
 
 const Demo3 = () => {
   return (
-    <Cell
-      title={
-        <div style={{ display: 'inline-flex', alignItems: 'center' }}>
-          <User />
-          <span style={{ marginLeft: '5px' }}>我是标题</span>
-        </div>
-      }
-      description={
-        <span>
-          我是描述<b style={{ color: 'red' }}>1</b>
-        </span>
-      }
-      extra="描述文字"
-    />
+    <Cell.Group>
+      <Cell
+        title={
+          <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+            <User />
+            <span style={{ marginLeft: '5px' }}>我是标题</span>
+          </div>
+        }
+        description={
+          <span>
+            我是描述<b style={{ color: 'red' }}>1</b>
+          </span>
+        }
+        extra={<ArrowRight size={14} />}
+      />
+
+      <Cell
+        title={
+          <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+            <User />
+            <span style={{ marginLeft: '5px' }}>我是标题</span>
+          </div>
+        }
+        description={
+          <span>
+            我是描述<b style={{ color: 'red' }}>1</b>
+          </span>
+        }
+        extra={<ArrowRight size={14} />}
+      />
+    </Cell.Group>
   )
 }
 export default Demo3

src/packages/cell/demos/taro/demo4.tsx

@@ -1,10 +1,38 @@
-import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { BadgePercent } from '@nutui/icons-react'
+import { Cell, Image, Radio, Switch } from '@nutui/nutui-react-taro'
+import React, { useState } from 'react'
 
 const App = () => {
+  const [radioChecked, setRadioChecked] = useState(false)
+  const handleRadioClick = () => {
+    setRadioChecked((v) => !v)
+  }
   return (
     <Cell.Group>
-      <Cell title="Switch" extra={<Switch defaultChecked />} />
+      <Cell align="center" title="Switch" extra={<Switch defaultChecked />} />
+      <Cell
+        align="center"
+        title="BadgePercent"
+        extra={<BadgePercent color="red" />}
+      />
+      <Cell
+        align="center"
+        title="Image"
+        extra={
+          <Image
+            width={20}
+            height={20}
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/201375/12/18248/5407/61b0715dE35f02aa9/55eff706b7755414.png"
+          />
+        }
+      />
+      <Cell
+        align="center"
+        title="Radio"
+        onClick={handleRadioClick}
+        extra={<Radio checked={radioChecked} />}
+      />
+      <Cell align="center" title="Radio" extra={<Radio checked />} />
     </Cell.Group>
   )
 }

src/packages/menu/demos/taro/demo6.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import { Filter } from '@nutui/icons-react'
+import { ArrowDown, Star } from '@nutui/icons-react-taro'
 import { Menu } from '@nutui/nutui-react-taro'
-import { ArrowDown, Star, Filter } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
 
 const Demo6 = () => {
   const [options] = useState([