@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/feedback/dialog/index.md

@@ -0,0 +1,306 @@
+---
+order: 3
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/dialog/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# Dialog 对话框 <Badge>2.0.0</Badge>
+
+
+模态对话框，在浮层中显示，引导用户进行相关操作，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
+
+弹出框组件支持函数调用和组件调用两种方式。
+
+## 引入
+
+```tsx
+import { Dialog } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 组件类型
+
+
+```tsx
+import { Button, Dialog, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <Space direction="vertical" style={{ padding: '0 12px' }}>
+      <Dialog id="demo" />
+      <div>01 反馈类对话框</div>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '对话框标题',
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            hideCancelButton: true,
+            confirmText: '我知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        反馈类-基础
+      </Button>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '对话框标题',
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            footerDirection: 'vertical',
+            cancelText: '不同意',
+            confirmText: '知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        反馈类-主次按钮
+      </Button>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '仅一行重要的提示文案时使用，仅标题样式，建议内容控制在两行',
+            hideCancelButton: true,
+            confirmText: '我知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        反馈类-仅标题
+      </Button>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '对话框标题',
+            content:
+              '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            hideCancelButton: true,
+            confirmText: '我知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        反馈类-内容超长
+      </Button>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '对话框标题',
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            hideCancelButton: true,
+            confirmText: '我知道了',
+            closeIcon: true,
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        反馈类-可关闭
+      </Button>
+      <div>02 确认类对话框</div>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            title: '对话框标题',
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            confirmText: '知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        确认类-基础
+      </Button>
+      <Button
+        type="primary"
+        fill="outline"
+        block
+        onClick={() =>
+          Dialog.open('demo', {
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            confirmText: '知道了',
+            onConfirm: () => {
+              Dialog.close('demo')
+            },
+            onCancel: () => {
+              Dialog.close('demo')
+            },
+          })
+        }
+      >
+        确认类-无标题
+      </Button>
+    </Space>
+  )
+}
+export default Demo1
+
+```
+    
+### 其他类型
+
+
+```tsx
+import { Button, Dialog, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <Space direction="vertical" style={{ padding: '0 12px' }}>
+      <Dialog id="demo1" />
+      <Button
+        fill="outline"
+        block
+        type="primary"
+        onClick={() =>
+          Dialog.open('demo1', {
+            title: '对话框标题',
+            content: '告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内描述文案尽可能控制在三行内',
+            onConfirm: () => {
+              Dialog.close('demo1')
+            },
+            onCancel: () => {
+              Dialog.close('demo1')
+            },
+            confirmButtonProps: {
+              type: 'danger',
+            },
+          })
+        }
+      >
+        确认类-按钮颜色配置
+      </Button>
+    </Space>
+  )
+}
+export default Demo2
+
+```
+    
+## Dialog
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 对话框是否可见 | `boolean` | `-` |
+| header | 自定义页头，传入 null 则不显示 | `ReactNode` | `-` |
+| title | 标题 | `ReactNode` | `-` |
+| content | 对话框的内容，适用于函数式调用 | `ReactNode` | `-` |
+| footer | 自定义页脚，传入 null 则不显示 | `ReactNode` | `-` |
+| confirmText | 确认按钮文案 | `ReactNode` | `确定` |
+| cancelText | 取消按钮文案 | `ReactNode` | `取消` |
+| overlay | 是否展示遮罩 | `boolean` | `true` |
+| hideConfirmButton | 是否隐藏确定按钮 | `boolean` | `false` |
+| hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
+| disableConfirmButton | 禁用确定按钮 | `boolean` | `false` |
+| closeIcon | 关闭按钮 | `boolean` \| `ReactNode` | `false` |
+| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
+| closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | `true` |
+| footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | `horizontal` |
+| lockScroll | 背景是否锁定 | `boolean` | `false` |
+| beforeCancel | 取消前回调，点击取消时触发 | `() => boolean` | `-` |
+| beforeClose | 关闭前回调 | `() => boolean` | `-` |
+| onConfirm | 确定按钮回调 | `(e?: MouseEvent) => Promise \| void` | `-` |
+| onCancel | 取消按钮回调 | `() => void` | `-` |
+| onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` |
+| onClick | 点击自身回调 | `() => void` | `-` |
+| onOverlayClick | 点击蒙层触发 | `() => void` | `-` |
+| contentAlign | 内容对齐类型 | `left` \| `center` \| `right` | `left` |
+
+### Methods
+| 方法名 | 说明 | 类型 |
+| --- | --- | --- |
+| Dialog.open | 打开 Dialog | (id: string, options: DialogOptions) => void |
+| Dialog.close | 关闭 Dialog | (id: string) => void |
+
+DialogOptions 是 DialogProps 的子集，包含如下属性：title, content, footer, confirmText, cancelText, overlay, closeOnOverlayClick, hideConfirmButton, hideCancelButton, disableConfirmButton, footerDirection, lockScroll, beforeCancel, beforeClose, onOverlayClick,
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-dialog-border-radius | 对话框圆角 | `$radius-3` |
+| \--nutui-dialog-bottom-close-icon-size | 对话框底部关闭按钮的宽高 | `24px` |
+| \--nutui-dialog-cancel-color | 取消按钮的颜色 | `$color-title` |
+| \--nutui-dialog-cancel-font-size | 取消按钮的字号 | `$font-size-2` |
+| \--nutui-dialog-close-color | 对话框关闭按钮的颜色 | `$color-title` |
+| \--nutui-dialog-close-height | 对话框关闭按钮的高度 | `$dialog-icon-font-size` |
+| \--nutui-dialog-close-left | 对话框关闭按钮的left值 | `$spacing-2` |
+| \--nutui-dialog-close-right | 对话框关闭按钮的right值 | `$spacing-2` |
+| \--nutui-dialog-close-top | 对话框关闭按钮的top值 | `$spacing-2` |
+| \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `$dialog-icon-font-size` |
+| \--nutui-dialog-content-line-height | 对话框内容行高 | `20px` |
+| \--nutui-dialog-content-margin | 对话框内容 margin | `$spacing-1 0 $spacing-5 0` |
+| \--nutui-dialog-content-max-height | 对话框内容最大高度 | `268px` |
+| \--nutui-dialog-content-text-align | 对话框内容文本对齐方式 | `left` |
+| \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按钮的背景色 | `$button-default-background-color` |
+| \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
+| \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
+| \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
+| \--nutui-dialog-header-font-size | 对话框标题字体大小 | `$font-size-3` |
+| \--nutui-dialog-header-font-weight | 对话框标题字重 | `$font-weight-bold` |
+| \--nutui-dialog-icon-font-size | icon的大小 | `20px` |
+| \--nutui-dialog-max-height | 对话框最大高度 | `420px` |
+| \--nutui-dialog-min-height | 对话框最小高度 | `124px` |
+| \--nutui-dialog-min-width | 对话框最小宽度 | `240px` |
+| \--nutui-dialog-padding | 对话框padding | `$spacing-5` |
+| \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
+| \--nutui-dialog-width | 对话框宽度 | `295px` |
+| \--nutui-dialog-z-index | 对话框的z-index | `$mask-content-z-index` |
+

package/docs/docs/components/feedback/drag/index.md

@@ -0,0 +1,164 @@
+---
+order: 4
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/drag/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# Drag 拖拽 <Badge>2.0.0</Badge>
+
+
+实现可拖拽的任意元素
+
+## 引入
+
+```tsx
+import { Drag } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { Button, Drag } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo1 = () => {
+  const isTaroWeb = Taro.getEnv() === 'WEB'
+  return (
+    <Drag style={{ left: '16px', top: isTaroWeb ? '102px' : '40px' }} className="drag-demo1">
+      <Button type="primary">drag</Button>
+    </Drag>
+  )
+}
+export default Demo1
+
+```
+    
+### 限制拖拽方向
+
+
+```tsx
+import { Button, Drag } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo2 = () => {
+  const isTaroWeb = Taro.getEnv() === 'WEB'
+  return (
+    <>
+      <Drag
+        direction="x"
+        style={{
+          top: isTaroWeb ? '184px' : '116px',
+          left: '16px',
+        }}
+        className="drag-demo21"
+      >
+        <Button type="primary">X</Button>
+      </Drag>
+      <Drag
+        direction="y"
+        style={{
+          top: isTaroWeb ? '184px' : '116px',
+          right: '62px',
+        }}
+        className="drag-demo22"
+      >
+        <Button type="primary">Y</Button>
+      </Drag>
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 自动吸边
+
+
+```tsx
+import { Button, Drag } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo3 = () => {
+  const isTaroWeb = Taro.getEnv() === 'WEB'
+
+  return (
+    <Drag
+      direction="x"
+      attract
+      style={{
+        top: isTaroWeb ? '264px' : '192px',
+        left: '16px',
+      }}
+      className="drag-demo3"
+    >
+      <Button type="primary">attract</Button>
+    </Drag>
+  )
+}
+export default Demo3
+
+```
+    
+### 限制拖拽边界
+
+
+```tsx
+import { Button, Drag } from '@mijadesign/mjui-react-taro'
+import Taro, { getSystemInfoSync } from '@tarojs/taro'
+import React from 'react'
+
+const Demo4 = () => {
+  const { screenWidth, windowHeight, screenHeight } = getSystemInfoSync()
+
+  const isTaroWeb = Taro.getEnv() === 'WEB'
+
+  const right = () => {
+    return screenWidth - 300 - 9
+  }
+  const bottom = () => {
+    return windowHeight - 501 - 57
+  }
+  return (
+    <>
+      <div
+        className="drag-boundary"
+        style={{
+          position: 'absolute',
+          top: isTaroWeb ? '350px' : '274px',
+          left: '16px',
+          width: '300px',
+          height: '200px',
+          border: '1px solid var(--nutui-color-primary)',
+        }}
+      />
+      <Drag
+        className="drag-demo4"
+        boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}
+        style={{ top: '360px', left: '50px' }}
+      >
+        <Button type="primary">boundary</Button>
+      </Drag>
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+## Drag
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| attract | 是否开启自动吸边 | `boolean` | `false` |
+| direction | 拖拽元素的拖拽方向限制 | `x` \| `y` \| `all` | `all` |
+| boundary | 拖拽元素的拖拽边界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |

package/docs/docs/components/feedback/empty/index.md

@@ -0,0 +1,211 @@
+---
+order: 5
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/empty/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# Empty 空状态 <Badge>2.0.0</Badge>
+
+空状态时的占位提示
+
+## 引入
+
+```tsx
+import { Empty } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import React from 'react'
+import { Button, Empty } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo1 = () => {
+  const styles = { backgroundColor: 'white', marginBottom: '12px', padding: '20px 0' }
+  return (
+    <>
+      <div style={styles}>
+        <Empty description="暂无信息" />
+      </div>
+      <div style={styles}>
+        <Empty title="标题" description="暂无信息" />
+      </div>
+      <div style={styles}>
+        <Empty title="标题" description="暂无信息" />
+        <div style={{ backgroundColor: 'white', margin: `${Taro.pxTransform(24)} ${Taro.pxTransform(45)} 0` }}>
+          <Button block type="primary">
+            主要按钮
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 底部按钮
+
+
+```tsx
+import React from 'react'
+import { Empty, Button, Row, Col } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo6 = () => {
+  const styles = { backgroundColor: 'white', marginBottom: '12px', padding: '20px 0' }
+
+  return (
+    <>
+      <div style={styles}>
+        <Empty description="暂无信息" />
+        <div style={{ backgroundColor: 'white', margin: `${Taro.pxTransform(24)} ${Taro.pxTransform(105)} 0` }}>
+          <Button block type="primary" fill="outline">
+            次要按钮
+          </Button>
+        </div>
+      </div>
+      <div style={styles}>
+        <Empty status="error" description="加载失败" />
+        <div style={{ margin: `${Taro.pxTransform(24)} ${Taro.pxTransform(45)} 0` }}>
+          <Row gutter="12">
+            <Col span="12" style={{ marginBottom: '0' }}>
+              <Button block fill="outline">
+                次要按钮
+              </Button>
+            </Col>
+            <Col span="12" style={{ marginBottom: '0' }}>
+              <Button block type="primary">
+                主要按钮
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 空状态图片类型
+
+
+```tsx
+import React, { useState } from 'react'
+import { Empty, Tabs } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  const [tab1value, setTab1value] = useState<string | number>('0')
+  return (
+    <Tabs
+      contentAnimation={false}
+      value={tab1value}
+      onChange={(value) => {
+        setTab1value(value)
+      }}
+      style={{ background: 'white' }}
+    >
+      <Tabs.TabPane title="无内容">
+        <Empty
+          description="暂无信息"
+          image={<img src="https://sblp-oss.mibaodata.com/static/front-end/empty.png" alt="" />}
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane title="无银行卡">
+        <Empty
+          description="您还没有添加银行卡"
+          image={<img src="https://sblp-oss.mibaodata.com/static/front-end/empty_bank.png" alt="" />}
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane title="无网络">
+        <Empty
+          description="网络出错了"
+          image={<img src="https://sblp-oss.mibaodata.com/static/front-end/empty_network.png" alt="" />}
+        />
+      </Tabs.TabPane>
+    </Tabs>
+  )
+}
+export default Demo5
+
+```
+    
+### Size 为 small 时，可用于半屏
+
+> 如果您是京东站内相关项目的开发，我们特意为您提供了一系列的缺省状态的图片链接，您可通过内部群获取。
+
+
+```tsx
+import React from 'react'
+import { Empty } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  const styles = { backgroundColor: 'white', marginBottom: '12px', padding: '20px 0' }
+  return (
+    <div style={styles}>
+      <Empty description="无数据" size="small" />
+    </div>
+  )
+}
+export default Demo2
+
+```
+    
+### 自定义内容大小
+
+
+```tsx
+import React from 'react'
+import { Empty } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  const styles = { backgroundColor: 'white', marginBottom: '12px', padding: '20px 0' }
+  return (
+    <div style={styles}>
+      <Empty description="无数据" imageSize={200} />
+    </div>
+  )
+}
+export default Demo3
+
+```
+    
+## Empty
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| image | 图片,支持传入图片 URL | `ReactNode` | `-` |
+| imageSize | 图片大小，number 类型单位为 px | `number` \| `string` | `-` |
+| title | 图片下方的标题 | `ReactNode` | `-` |
+| description | 图片下方的描述文字 | `ReactNode` | `-` |
+| size | 组件整体大小，适配于全屏或半屏 | `small` \| `base` | `base` |
+| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
+| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-padding | Empty组件图片的padding值 | `32px 40px` |
+| \--nutui-empty-image-size | Empty组件图片的尺寸大小 | `160px` |
+| \--nutui-empty-image-small-size | size 为 small 时，Empty组件图片的尺寸大小 | `120px` |
+| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `0px` |
+| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `8px` |
+| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-base` |
+| \--nutui-empty-description-margin-top | Empty组件图片描述margin-top的值 | `4px` |
+| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.2` |