@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/base/image/index.md

@@ -0,0 +1,282 @@
+---
+order: 6
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/base/pages/image/index'
+group:
+    title: 基础组件
+    order: 2
+---
+
+# Image 图片
+
+
+增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
+
+## 引入
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+借助 Taro Image 标签实现，可以透传使用 Taro Image 的属性。
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  const src = 'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png'
+  return (
+    <>
+      <Image src={src} height={159} />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 圆形图片
+
+通过 radius 属性可以设置图片变圆，注意当图片宽高不相等且 fit 为 contain 或 scale-down 时，将无法填充一个完整的圆形。
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  const src = 'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png'
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <div style={{ width: 98 }}>
+          <Image src={src} mode="aspectFit" width="80" height="80" radius="50%" />
+        </div>
+        <div style={{ width: 98 }}>
+          <Image src={src} mode="scaleToFill" width="80" height="80" radius="50%" />
+        </div>
+        <div style={{ width: 98 }}>
+          <Image src={src} mode="scaleToFill" width="80" height="80" radius="10px" />
+        </div>
+      </div>
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 加载中提示
+
+`Image` 组件提供了默认的加载中提示，支持通过 `loading` 自定义内容。
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import { Loading } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
+import React from 'react'
+
+const Demo3 = () => {
+  const imageText: React.CSSProperties = {
+    width: 80,
+    marginTop: 5,
+    textAlign: 'center',
+    color: '#999',
+  }
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <div style={{ width: 98 }}>
+          <Image width="80" height="80" />
+          <View style={imageText}>默认</View>
+        </div>
+        <div style={{ width: 98 }}>
+          <Image width="80" height="80" loading={<Loading className="nut-icon-loading" />} />
+          <View style={imageText}>自定义</View>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### 加载失败
+
+`Image` 组件提供了默认的加载失败提示，支持通过 `error` 自定义内容。
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import { Failure } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
+import React from 'react'
+
+const Demo4 = () => {
+  const imageText: React.CSSProperties = {
+    width: 80,
+    marginTop: 5,
+    textAlign: 'center',
+    color: '#999',
+  }
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <div style={{ width: 98 }}>
+          <Image src="https://x" width="80" height="80" />
+          <View style={imageText}>默认</View>
+        </div>
+        <div style={{ width: 98 }}>
+          <Image src="https://x" width="80" height="80" error={<Failure />} />
+          <View style={imageText}>自定义</View>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+### Image + text 模式
+
+`Image` 组件和文本组合。
+
+
+```tsx
+import React from 'react'
+import { Image } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Image
+        src="https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png"
+        width="30"
+        height="30"
+        style={{ marginRight: '10px' }}
+        onError={() => {
+          console.log('image error')
+        }}
+      />
+      <div
+        style={{
+          width: '220px',
+        }}
+      >
+        雪纺衫女2021年春季新款洋气轻熟上衣
+      </div>
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+### 填充模式
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  const src = 'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png'
+  const modes = ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix']
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {modes.map((mode) => {
+          return (
+            <div style={{ width: 100, height: 100 }} key={mode}>
+              <Image src={src} mode={mode as any} width="80" height="80" />
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 图片位置
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo7 = () => {
+  const src = 'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png'
+  const modes = ['top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right']
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {modes.map((mode) => {
+          return (
+            <div style={{ width: 100, height: 100 }} key={mode}>
+              <Image src={src} mode={mode as any} width="80" height="80" />
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default Demo7
+
+```
+    
+### 图片懒加载
+
+
+```tsx
+import { Image } from '@mijadesign/mjui-react-taro'
+import { ScrollView } from '@tarojs/components'
+import React from 'react'
+
+const Demo8 = () => {
+  const src = 'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png'
+  return (
+    <>
+      <ScrollView style={{ height: '350px' }} scrollY>
+        {[
+          ...new Array(3).fill(src),
+          'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+          'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+        ].map((_, i) => {
+          return <Image key={i} src={_} lazyLoad width="100%" height="150" />
+        })}
+      </ScrollView>
+    </>
+  )
+}
+export default Demo8
+
+```
+    
+## Image
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 图片链接 | `string` | `-` |
+| width | 宽度，默认单位`px` | `string` | `-` |
+| height | 高度，默认单位`px` | `string` | `-` |
+| radius | 圆角大小 | `string`  \|  `number` | `-` |
+| error | 是否展示图片加载失败 | `boolean \| ReactNode` | `true` |
+| loading | 是否展示加载中图片 | `boolean \| ReactNode` | `false` |
+| onLoad | 图片加载完后触发 | `() => void` | `-` |
+| onError | 图片加载失败后触发 | `() => void` | `-` |
+
+### 直接使用 Taro 现有 Image 组件开发 [参考文档](https://taro-docs.jd.com/docs/components/media/image)

package/docs/docs/components/base/overlay/index.md

@@ -0,0 +1,288 @@
+---
+order: 7
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/base/pages/overlay/index'
+group:
+    title: 基础组件
+    order: 2
+---
+
+# Overlay 遮罩层 <Badge>2.0.0</Badge>
+
+
+创建一个遮罩层，通常用于阻止用户进行其他操作
+
+## 引入
+
+```tsx
+import { Overlay } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  const [visible, setVisible] = useState(false)
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="primary" onClick={handleToggleShow}>
+        显示遮罩层
+      </Button>
+      <Overlay
+        visible={visible}
+        onClick={onClose}
+        style={{ '--nutui-overlay-zIndex': 2020 }}
+        afterShow={() => {
+          console.log('afterShow')
+        }}
+        afterClose={() => {
+          console.log('afterClose')
+        }}
+      />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 自定义遮罩样式
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  const [visible, setVisible] = useState(false)
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="primary" onClick={handleToggleShow}>
+        自定义遮罩样式
+      </Button>
+      <Overlay
+        visible={visible}
+        onClick={onClose}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, .4)',
+          '--nutui-overlay-zIndex': 2000,
+        }}
+      />
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 设置动画时间
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  const [visible, setVisible] = useState(false)
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="primary" onClick={handleToggleShow}>
+        设置动画时间
+      </Button>
+      <Overlay
+        visible={visible}
+        onClick={onClose}
+        style={{ '--nutui-overlay-animation-duration': '2.5s' }}
+        duration={2500}
+        afterShow={() => {
+          console.log('afterShow')
+        }}
+        afterClose={() => {
+          console.log('afterClose')
+        }}
+      />
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### 不锁定背景滚动
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  const [visible, setVisible] = useState(false)
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="primary" onClick={handleToggleShow}>
+        不锁定背景滚动
+      </Button>
+      <Overlay visible={visible} onClick={onClose} lockScroll={false} />
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+### 嵌套内容
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  const [visible, setVisible] = useState(false)
+
+  const wrapperStyle = {
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+  const contentStyle = {
+    display: 'flex',
+    width: '150px',
+    height: '150px',
+    background: '#fff',
+    borderRadius: '8px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'red',
+  }
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="success" onClick={handleToggleShow}>
+        嵌套内容
+      </Button>
+      <Overlay visible={visible} onClick={onClose}>
+        <div style={wrapperStyle}>
+          <div style={contentStyle}>这里是正文</div>
+        </div>
+      </Overlay>
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+### 点击遮罩不关闭
+
+
+```tsx
+import React, { useState } from 'react'
+import { Button, Overlay } from '@mijadesign/mjui-react-taro'
+
+const Demo6 = () => {
+  const [visible, setVisible] = useState(false)
+  const wrapperStyle = {
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+  const contentStyle = {
+    display: 'flex',
+    width: '150px',
+    height: '150px',
+    background: '#fff',
+    borderRadius: '8px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'red',
+  }
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Button type="primary" onClick={handleToggleShow}>
+        点击遮罩不关闭
+      </Button>
+      <Overlay visible={visible} closeOnOverlayClick={false}>
+        <div style={wrapperStyle}>
+          <div style={contentStyle} onClick={onClose}>
+            这里是正文
+          </div>
+        </div>
+      </Overlay>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+## Overlay
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 当前组件是否显示 | `boolean` | `false` |
+| duration | 动画时长，单位毫秒 | `number` | `300` |
+| lockScroll | 背景是否锁定 | `boolean` | `true` |
+| zIndex | 设置组件页面层级 | `number` | `1000` |
+| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
+| onClick | 点击时触发 | `event: Event` | `-` |
+| afterClose | 完全关闭后触发 | `() => void` | `-` |
+| afterShow | 完全展示后触发 | `() => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-overlay-bg-color | 遮罩层背景颜色 | `$color-mask` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
+| \--nutui-overlay-content-bg-color | 遮罩层嵌套内容背景颜色 | `$white` |
+| \--nutui-overlay-content-color | 遮罩层嵌套内容字体颜色 | `$color-title` |
+| \--nutui-overlay-animation-duration| 遮罩层动画延时的时长 | `0.3s` |