@mijadesign/nut-mcp 1.0.0-alpha.0

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

@@ -0,0 +1,279 @@
+---
+order: 2
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/base/pages/cell/index'
+group:
+    title: 基础组件
+    order: 2
+---
+
+# Cell 单元格 <Badge>2.0.0</Badge>
+
+
+列表项，可组成列表。
+
+## 引入
+
+```tsx
+import { Cell } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 自定义右侧区域
+
+
+```tsx
+import React from 'react'
+import { Cell, Image, Switch, Tag } from '@mijadesign/mjui-react-taro'
+
+const App = () => {
+  const title = '文本标签'
+  return (
+    <Cell.Group>
+      <Cell title={title} extra={<div>内容</div>} />
+      <Cell title={title} extra={<div>内容超过1行展示效果内容超过1行展示效果内容超过1行展示效果</div>} />
+      <Cell
+        title={title}
+        extra={
+          <Image
+            style={{ width: '32px', height: '32px', display: 'inline-block' }}
+            src="https://sblp-oss.mibaodata.com/static/front-end/family/self_girl.png"
+          />
+        }
+      />
+      <Cell
+        title={title}
+        extra={
+          <Tag type="success" mode="fill">
+            标签
+          </Tag>
+        }
+      />
+      <Cell title={title} extra={<Switch defaultChecked />} />
+    </Cell.Group>
+  )
+}
+export default App
+
+```
+    
+### 自定义内容
+
+
+```tsx
+import React from 'react'
+import { Cell } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  const title = '文本标签'
+  return (
+    <Cell.Group>
+      <Cell title={title} extra={<div>内容</div>} />
+      <Cell>
+        <div style={{ marginRight: '16px', color: '#666666' }}>文本标签</div>
+        <div>内容</div>
+      </Cell>
+    </Cell.Group>
+  )
+}
+export default Demo2
+
+```
+    
+### 分组用法
+
+通过 `divider` 属性可以让单元格之间不显示下边线。
+
+
+```tsx
+import React from 'react'
+import { Cell } from '@mijadesign/mjui-react-taro'
+
+const Demo7 = () => {
+  const title = '文本标签'
+  return (
+    <Cell.Group divider={false}>
+      <Cell title={title} extra="内容" />
+      <Cell title={title} extra="内容" />
+    </Cell.Group>
+  )
+}
+export default Demo7
+
+```
+    
+### 基础用法
+
+
+```tsx
+import { Cell } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    console.log('点击事件')
+  }
+  return (
+    <>
+      <Cell title="我是标题" extra="描述文字" />
+      <Cell title="我是标题" description="我是描述" extra="描述文字" />
+      <Cell
+        title="点击测试"
+        onClick={(event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => testClick(event)}
+      />
+      <Cell title="圆角设置0" radius={0} />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 自定义标题区域
+
+
+```tsx
+import { WarningFill } from '@mijadesign/mobile-icons'
+import { Cell } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo3 = () => {
+  return (
+    <Cell
+      title={
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <WarningFill />
+          <span style={{ marginLeft: '5px' }}>我是标题</span>
+        </div>
+      }
+      description={
+        <span>
+          我是描述<b style={{ color: 'red' }}>1</b>
+        </span>
+      }
+      extra="描述文字"
+    />
+  )
+}
+export default Demo3
+
+```
+    
+### 垂直居中
+
+通过 `align` 属性可以让 Cell 的左右内容都垂直居中。
+
+
+```tsx
+import { Cell } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo5 = () => {
+  return <Cell align="center" title="我是标题" description="我是描述" extra="描述文字" />
+}
+export default Demo5
+
+```
+    
+### 链接 | 分组用法
+
+使用 `nut-cell-group` 支持 `title`和`extra`
+
+```tsx
+import { Cell } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import { navigateTo, redirectTo } from '@tarojs/taro'
+import React from 'react'
+
+const Demo6 = () => {
+  const onJumpclick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, link: string) => {
+    const replace = false
+    if (link) {
+      replace ? redirectTo({ url: link }) : navigateTo({ url: link })
+    }
+  }
+  return (
+    <>
+      <Cell.Group>
+        <Cell className="nutui-cell-clickable" title="链接" align="center" extra={<ArrowRight />} />
+        <Cell
+          className="nutui-cell-clickable"
+          title="URL 跳转"
+          extra={
+            <>
+              <span style={{ marginRight: '5px' }}>链接</span>
+              <ArrowRight />
+            </>
+          }
+          align="center"
+          onClick={(event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+            onJumpclick(event, '/pages/index/index')
+          }}
+        />
+      </Cell.Group>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+## Cell.Group
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 分组标题 | `ReactNode` | `-` |
+| description | 分组描述 | `ReactNode` | `-` |
+| divider | 单元格之间是否有分割线 | `boolean` | `true` |
+
+## Cell
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `ReactNode` | `-` |
+| description | 描述 | `ReactNode` | `-` |
+| extra | 右侧描述 | `ReactNode` | `-` |
+| radius | 圆角半径 | `string` | `6px` |
+| align | 纵轴方向上的对齐方式，可选值为：`flex-start`、`center`、`flex-end` | `string` | `flex-start` |
+| onClick | 点击事件 | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | `false` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-cell-title-color | 单元格标题字体颜色 | `$color-title` |
+| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-size-2` |
+| \--nutui-cell-description-color | 单元格描述字体颜色 | `$color-text` |
+| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-size-2` |
+| \--nutui-cell-background-color | 单元格背景颜色 | `$color-background-overlay` |
+| \--nutui-cell-border-radius | 单元格圆角大小 | `$radius-1` |
+| \--nutui-cell-box-shadow | 单元格阴影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` |
+| \--nutui-cell-description-color | 单元格描述字体颜色 | `$color-text` |
+| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-size-2` |
+| \--nutui-cell-divider-border-bottom | 单元格分割线下边框 | `0.5px solid $color-border` |
+| \--nutui-cell-divider-left | 单元格分割线左边距 | `$spacing-3` |
+| \--nutui-cell-divider-right | 单元格分割线右边距 | `$spacing-3` |
+| \--nutui-cell-extra-color | 单元格右侧描述字体颜色 | `$color-title` |
+| \--nutui-cell-extra-font-size | 单元格右侧描述字体大小 | `$font-size-2` |
+| \--nutui-cell-group-background-color | 单元格分组的背景颜色 | `$color-background-overlay` |
+| \--nutui-cell-group-description-color | 单元格分组的描述颜色 | `$color-text` |
+| \--nutui-cell-group-description-font-size | 单元格分组的描述字体大小 | `$font-size-1` |
+| \--nutui-cell-group-description-line-height | 单元格分组的描述行高 | `16px` |
+| \--nutui-cell-group-description-padding | 单元格分组的描述内边距 | `0 12px` |
+| \--nutui-cell-group-title-color | 单元格分组的标题字体颜色 | `$color-title` |
+| \--nutui-cell-group-title-font-size | 单元格分组的标题字体大小 | `$font-size-2` |
+| \--nutui-cell-group-title-line-height | 单元格分组的标题行高 | `24px` |
+| \--nutui-cell-group-title-padding | 单元格分组的标题内边距 | `0 12px` |
+| \--nutui-cell-group-wrap-margin | 单元格分组容器的外边距 | `0` |
+| \--nutui-cell-line-height | 单元格行高 | `24px` |
+| \--nutui-cell-padding | 单元格内边距 | `$spacing-3` |
+| \--nutui-cell-title-color | 单元格标题字体颜色 | `$color-title` |
+| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-size-2` |

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

@@ -0,0 +1,215 @@
+---
+order: 4
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/base/pages/configprovider/index'
+group:
+    title: 基础组件
+    order: 2
+---
+
+# ConfigProvider 全局配置 <Badge>2.0.0</Badge>
+
+
+用于全局配置 mijaui-react 组件，提供主题定制，国际化支持。
+
+## 引入
+
+```tsx
+import { ConfigProvider } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 主题定制
+
+mjui-react 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。
+
+#### 通过 CSS 覆盖
+
+你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+
+> 小程序不存在 `:root` 元素，只能在 page 根元素里覆盖 CSS 变量。
+
+```css
+/* 添加这段样式后，Primary Button 会变成绿色 */
+:root {
+  --nutui-color-primary: green;
+}
+```
+
+> @mijadesign/mjui-react-taro 中默认主题文件：@mijadesign/mjui-react-taro/dist/styles/custom.scss
+
+#### 通过 ConfigProvider 覆盖
+
+ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme 属性来配置一些主题变量。
+
+> ConfigProvider 组件不是一个虚拟组件，它会生成一个 View 标签。
+
+
+```tsx
+import React from 'react'
+import { ConfigProvider, Cell, Rate, Button } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <ConfigProvider>
+        <Cell.Group>
+          <Cell>
+            <Rate defaultValue={3} />
+          </Cell>
+          <Cell>
+            <Button type="primary" block>
+              提交
+            </Button>
+          </Cell>
+        </Cell.Group>
+      </ConfigProvider>
+    </>
+  )
+}
+
+export default Demo1
+
+```
+    
+
+```tsx
+import { Button, Cell, ConfigProvider, Rate } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  const darkTheme = {
+    nutuiColorPrimary: 'green',
+  }
+  return (
+    <>
+      <ConfigProvider theme={darkTheme}>
+        <Cell.Group>
+          <Cell>
+            <Rate defaultValue={3} />
+          </Cell>
+          <Cell>
+            <Button type="primary" block>
+              提交
+            </Button>
+          </Cell>
+        </Cell.Group>
+      </ConfigProvider>
+    </>
+  )
+}
+
+export default Demo2
+
+```
+    
+#### CSS 变量
+
+mjui-react 支持的 CSS 变量如下：
+
+```css
+:root,
+page {
+  --nutui-color-primary: red;
+  /* 分割线 */
+  --nutui-black-1: rgba(0, 0, 0, 0.1),
+  /* 边框色 */
+  --nutui-black-3: rgba(0, 0, 0, 0.3),
+  /* 禁用色 */
+  --nutui-black-4: rgba(0, 0, 0, 0.4),
+   /* 次要文字色，用于次级标题、属性标示、非主要信息引导等。 */
+  --nutui-black-6: rgba(0, 0, 0, 0.6),
+  /* 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 */
+  --nutui-black-7: rgba(0, 0, 0, 0.7),
+  /* 主要内容用色，常用语常规标题内容、常规按钮文字。 */
+  --nutui-black-95: rgba(0, 0, 0, 0.95),
+}
+
+```
+
+### 国际化
+
+miui-react 提供了 ConfigProvider 组件用于全局配置国际化文案。目前支持以下语言:
+
+* 简体中文 | zh-CN
+* 繁体中文（中国台湾） | zh-TW
+* 维吾尔语 ｜ zh-UG
+* 英语（美式） | en-US
+* 印尼语 ｜ id-ID
+
+
+```tsx
+import React from 'react'
+import { ConfigProvider, TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <>
+      <ConfigProvider>
+        <TextArea disabled showCount maxLength={20} />
+      </ConfigProvider>
+    </>
+  )
+}
+
+export default Demo3
+
+```
+    
+
+```tsx
+import React from 'react'
+import { ConfigProvider, TextArea } from '@mijadesign/mjui-react-taro'
+import enUS from '@mijadesign/mjui-react-taro/dist/locales/en-US.ts'
+
+const Demo4 = () => {
+  return (
+    <>
+      <ConfigProvider locale={enUS}>
+        <TextArea disabled showCount maxLength={20} />
+      </ConfigProvider>
+    </>
+  )
+}
+
+export default Demo4
+
+```
+    
+### RTL
+
+
+```tsx
+import React from 'react'
+import { ConfigProvider, Cell } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <ConfigProvider direction="rtl">
+        <Cell
+          title={
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <span style={{ marginLeft: '5px' }}>我是标题</span>
+            </div>
+          }
+          description={<span>我是描述</span>}
+          extra="描述文字"
+        />
+      </ConfigProvider>
+    </>
+  )
+}
+
+export default Demo5
+
+```
+    
+## ConfigProvider
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| locale | 设置多语言包 | `BaseLang` | `zhCN` |
+| theme | 设置主题 | `Record<string, string>` | `-` |