### Basic Usage Example in Demo File

Source: https://github.com/shuyunff2e/cloud-react/blob/master/docs/demo.md

This snippet illustrates the typical content structure of a `*.markdown` demo file. It includes front matter (metadata like title and description), a React JSX component demonstrating basic button usage, and accompanying styling defined in either LESS or CSS. The example focuses on a simple use case for the `Button` component.

```jsx
import { Button } from 'cloud-react';
import React from 'react';

export default class BasicDemo extends React.Component {
  render() {
    return <Button className="btn">普通按钮</Button>;
  }
}
```

```less
.btn {
  a {
    color: red;
  }
}
```

```css
.btn a {
  color: red;
}
```

--------------------------------

### Basic CDrawer Usage Example

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-drawer/demos/basic.md

This example demonstrates a fundamental implementation of the CDrawer component. It shows how to control the drawer's visibility using a button, manage its open/close state, and configure basic properties like title, placement, and event handlers.

```jsx
/**
 * title: 基础
 * desc: 头像有六种尺寸，两种形态
 */
import React from 'react';

import { Button, CDrawer } from 'cloud-react';

class Demo extends React.Component {
	 constructor(props) {
        super(props);
				this.state = {
						open: false,
				};
	 }
 
  showDrawer() {
    this.setState({
      open: true,
    });
  }
  onClose() {
   this.setState({
      open: false,
    });
  }
  render() {
    return (
      <div style={{position:'relative'}}>
        <Button type="primary" onClick={()=>{this.showDrawer()}}>
          Open
        </Button>
        <CDrawer
          title="Basic Drawer"
          placement="bottom"
          onClose={()=>{this.onClose()}}
          open={this.state.open}
					getContainer={false}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </CDrawer>
      </div>
    );
  }
}

export default Demo;
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/shuyunff2e/cloud-react/blob/master/README.md

This command installs all required Node.js dependencies for the cloud-react project using npm. It fetches packages listed in the project's package.json file.

```bash
$ npm i
```

--------------------------------

### Start Development Server

Source: https://github.com/shuyunff2e/cloud-react/blob/master/README.md

This command initiates the local development server for the cloud-react project. It's used for live development, testing changes, and typically includes hot-reloading capabilities.

```bash
$ npm start
```

--------------------------------

### Component Demo File Directory Structure

Source: https://github.com/shuyunff2e/cloud-react/blob/master/docs/demo.md

Illustrates the recommended directory structure for placing component demo files within the `src/components` directory. Each component should have a `demos` subdirectory containing its markdown demo files, such as `basic.markdown`.

```javascript
|- src
	|- components
		|- button
			|- demos
				|- basic.markdown
```

--------------------------------

### React CCascader Component Basic Usage

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-cascader/demos/transition.md

This JSX code snippet demonstrates how to use the `CCascader` component from the `cloud-react` library. It initializes the component with static address options, sets a placeholder text, and applies a 'slide-up' transition effect for its dropdown. The example showcases a typical setup for a cascader selection input in a React application.

```jsx
import React from 'react';
import { CCascader } from 'cloud-react';
const addressOptions =  [
  {
    value: 'zhejiang',
    label: 'ZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiangZhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
          {
            value: 'xiasha',
            label: 'Xia Sha',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua men',
          },
        ],
      },
    ],
  },
];
export default function Demo() {
	return (
		<CCascader
      style={{ width: 328 }}
      options={addressOptions}
      placeholder="Please select"
      transitionName="slide-up"
    />
		);
}
```

--------------------------------

### Modal Static Method Call Examples

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/modal/index.md

Demonstrates the basic usage of static methods like `confirm`, `success`, `error`, `info`, and `warning` available on the `Modal` object.

```javascript
Modal.confirm(config)
Modal.success(config)
Modal.error(config)
Modal.info(config)
Modal.warning(config)
```

--------------------------------

### React Input Component Demonstrations

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/input/demos/mixin.md

This React component `InputDemo` showcases various configurations and usages of `Input` and `Mixin` components from the `cloud-react` library. It includes examples of basic input fields, merged inputs, separated inputs using `Mixin.InputInput`, range inputs with `Mixin.RangeInput`, and a select-input combination with `Mixin.SelectInput`. Users can dynamically control the disabled state, size, and border radius of the inputs using checkboxes and radio buttons.

```jsx
import React, { createRef, useState } from 'react';
import { Mixin, Icon, Input, Radio, Checkbox } from 'cloud-react';
import './styles/basic.less'

export default function InputDemo() {
  const [disabled, setDisabled] = useState(false);
  const [size, setSize ] = useState('default');
  const [borderRadiusSize, setBorderRadiusSize] = useState('default');

  return (
      <div>
        <div style={{ marginBottom: 10 }}>
          <Checkbox checked={disabled} onChange={checked => {
            setDisabled(checked)
          }}>禁用</Checkbox>
        </div>
        <div style={{ marginBottom: 10 }}>
          <Radio.Group value={size} onChange={setSize} horizontal>
            <Radio value="large">large</Radio>
            <Radio value="default">default</Radio>
            <Radio value="small">small</Radio>
          </Radio.Group>
        </div>
        <div style={{ marginBottom: 10 }}>
          <Radio.Group value={borderRadiusSize} onChange={setBorderRadiusSize} style={{ marginBottom: 20 }}>
            <Radio value="default">圆角：default</Radio>
            <Radio value="medium">圆角：medium</Radio>
            <Radio value="large">圆角：large</Radio>
          </Radio.Group>
        </div>
        <div key={`${size}-${disabled}-${borderRadiusSize}`}>
          <div>
            <h5>两个合并输入框</h5>
            <div>
              <div style={{ display: 'flex', gap: 8 }}>
                <Input
                  defaultValue={2312}
                  style={{ width: 70 }}
                  size={size}
                  disabled={disabled}
                  borderRadiusSize={borderRadiusSize}
                />
                <Input
                  defaultValue="内容"
                  style={{ width: 250 }}
                  placeholder="请输入"
                  size={size}
                  disabled={disabled}
                  borderRadiusSize={borderRadiusSize}
                />
              </div>
            </div>
          </div>
          <div>
            <h5>两个分离输入框</h5>
            <div>
              <Mixin.InputInput
                // 此处配置第一个输入框的属性
                inputConfig1={{
                  style: { width: 50 },
                  maxLength: 50,
                  defaultValue: "+86",
                  size,
                  disabled,
                  borderRadiusSize
                }}
                // 此处配置第二个输入框的属性
                inputConfig2={{
                  style: { width: 250 },
                  maxLength: 50,
                  placeholder: '请输入',
                  size,
                  disabled,
                  borderRadiusSize,
                  onEnter: evt => {
                    console.log(evt);
                  },
                }}
              />
            </div>
          </div>
          <div>
            <h5>分离区间</h5>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Input 
                  defaultValue={12}
                  style={{ width: 70 }}
                  size={size}
                  disabled={disabled}
                  borderRadiusSize={borderRadiusSize}
                />
                <p style={{ width: 8, height: 1, borderBottom: '1px solid rgba(0,0,0,0.65)' }}/>
                <Input
                  defaultValue={200}
                  style={{ width: 70 }}
                  size={size}
                  disabled={disabled}
                  borderRadiusSize={borderRadiusSize}
                />
              </div>
            </div>
          </div>
          <div>
            <h5>合并区间</h5>
            <div>
              <Mixin.RangeInput
                disabled={disabled}
                style={{}}
                borderRadiusSize={borderRadiusSize}
                // 此处配置第一个输入框的属性
                inputConfig1={{
                  style: { width: 100 },
                  maxLength: 50,
                  placeholder: '请输入',
                  size,
                  disabled,
                  borderRadiusSize
                }}
                // 此处配置第二个输入框的属性
                inputConfig2={{
                  style: { width: 100 },
                  maxLength: 50,
                  placeholder: '请输入',
                  size,
                  disabled,
                  borderRadiusSize
                }}
              />
            </div>
          </div>
          <div>
            <h5>下拉框+输入框</h5>
            <Mixin.SelectInput
              // 此处配置下拉框的属性
              selectConfig={{
                style: { width: 110 },
                dropdownStyle: { width: 324 },
                size,
                disabled,
                borderRadiusSize,
                dataSource: [
                  { label: '商品名称', value: 1 },
                  { label: 'sku编码', value: 2 },
                ],
                onChange: value => {
                  console.log(value);
                },
              }}

```

--------------------------------

### React Popover Component Examples

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/popover/demos/basic.md

This comprehensive example demonstrates various configurations and features of the `cloud-react` Popover component. It shows how to control the trigger type (click/hover), display different content types (plain text, input fields), include confirmation/cancel buttons, add icons, set titles, and handle user interactions like button clicks and form submissions within the popover. It also includes an example of a validation message using `Message.error`.

```jsx
import React, { useState, useEffect } from 'react';
import { Button, Popover, Message, Checkbox, Input } from 'cloud-react';

export default function PopoverDemo() {
	const [isClick, setIsClick] = useState(true);
  const [trigger, setTrigger] = useState('hover');

  useEffect(() => {
      setTrigger(isClick ? 'click' : 'hover');
  }, [isClick]);

  const split = <p style={{ height: 10 }} />

	return (
      <div>
        <Checkbox checked={isClick} onChange={() => {
          setIsClick(!isClick);
        }}>通过 click 触发</Checkbox>
        {split}
        <Popover
          trigger={trigger}
          placement="right"
          content="这是一段文字描述">
          <Button>纯文字</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          showCancelBtn
          showConfirmBtn
          content={(
            <Input placeholder="请输入" style={{ width: 200 }}/>
          )}>
          <Button>带输入框</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          size="small"
          placement="right"
          content="这是一段文字描述"
          showCancelBtn
          showConfirmBtn >
          <Button>文字 + btn</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          content="这是一段文字描述"
          showIcon >
          <Button>文字 + Icon</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          content="这是一段文字描述"
          iconStyle={{ color: '#e74949' }}
          showIcon >
          <Button>自定义图标</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          size="small"
          content="这是一段文字描述"
          showIcon
          isReverseBtn
          showCancelBtn
          showConfirmBtn>
          <Button>文字 + Icon + btn</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          size="small"
          title="标题"
          content="这是一段文字描述">
          <Button>标题</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          size="small"
          title="标题"
          content="这是一段文字描述"
          showIcon>
          <Button>标题 + Icon</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          width={300}
          title="标题"
          content="这是一段文字描述"
          showCancelBtn
          showConfirmBtn
          onCancelClick={() => {
            console.log('cancleBtn is clicked');
          }}
          onConfirmClick={() => {
            console.log('confirmBtn is clicked');
          }}>
          <Button>标题 + btn</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          title="标题"
          content="这是一段文字描述"
          showIcon
          showCancelBtn
          showConfirmBtn
          onCancelClick={() => {
            console.log('cancleBtn is clicked');
          }}
          onConfirmClick={() => {
            const a = new Array(2000).fill(1).reduce((sum, item) => {
              sum += item;
              return sum;
            }, 0);
            Message.error('校验 불법，无法关闭弹窗')
            return a >= 2000;
          }}>
          <Button>标题 + Icon + btn（click 触发）</Button>
        </Popover>
        {split}
        <Popover
          trigger={trigger}
          title="标题"
          content="正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容"
          showIcon
          showCancelBtn
          showConfirmBtn>
          <Button>超长</Button>
        </Popover>
        {split}
        <Popover
          type="remind"
          trigger={trigger}
          content="正文内容正内容正文内容正文内容正文内容正文内容正文内容正内容正文内容正文内容正文内容正文内容">
          <Button>新功能提醒</Button>
        </Popover>
      </div>
	);
}
```

--------------------------------

### React Modal.confirm API Usage Examples

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/modal/demos/confirm.md

This React component demonstrates various ways to use the `Modal.confirm` API from the `cloud-react` library. It includes examples for a basic confirmation dialog, a dialog with a custom icon, a dialog with customized button text, and an asynchronous confirmation dialog that resolves after a delay. The component manages state to display the result of user interaction (OK/Cancel).

```jsx
/**
 * title: 确认对话框
 * desc: 通过API调用方式弹出confirm确认对话框
 */
import React from 'react';
import { Button, Modal } from 'cloud-react';

const blank = '\u00A0';

class ModalDemo extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			content: ''
		};
	}

	handleOk = () => {
		this.setState({
			content: '你点击了确定'
		});
	};

	openConfirmModal = () => {
		Modal.confirm({
			isShowIcon: false,
			title: '基本确认对话框',
			body: '杭州数云信息技术有限公司是国内领先的全域消费者增长方案提供商',
			cancelBtnOpts: { type: 'secondary' },
			isReverseBtn: true,
			// hasFooter: false,
      //       className: "test",
			onOk: () => {
				this.handleOk();
			},
			onCancel: () => {
				this.setState({
					content: '你点击了取消'
				});
			}
		});
	};

	openCustomerIconConfirmModal = () => {
		Modal.confirm({
			title: '自定义图标确认对话框',
			isShowIcon: true,        
			title: '确定要删除吗？',
			body: '这里是删除后相应状态的描述。',
			onOk: () => {
				this.handleOk();
			},
			onCancel: () => {
				this.setState({
					content: '你点击了取消'
				});
			}
		});
	};


	openCustomConfirmModal = () => {
		Modal.confirm({
			title: '自定义弹窗按钮',
			okText: '好',
			cancelText: '关闭',
			body: '按钮的文案修改了',
			onOk: () => {
				this.setState({
					content: '你点击了好'
				});
			},
			onCancel: () => {
				this.setState({
					content: '你点击了关闭'
				});
			}
		});
	}

	openAsyncConfirmModal = () => {
		Modal.confirm({
			title: '异步弹窗框',
			body: '这是个异步的example，请点击确定按钮测试验证',
			onOk: () => {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve();
						this.handleOk();
					}, 3000);
				}).catch(() => {
					console.log('error');
				});
			},
			onCancel: () => {
				this.setState({
					content: '你点击了取消'
				});
			}
		});
	};

	render() {
		return (
			<div>
				<Button type="primary" onClick={this.openConfirmModal}>
					基础确认对话框+多行文本
				</Button>
				{blank}
				<Button type="primary" onClick={this.openCustomerIconConfirmModal}>
					自定义图标确认对话框
				</Button>
				{blank}
				<Button type="normal" onClick={this.openAsyncConfirmModal}>
					异步确认对话框
				</Button>
				{blank}
				<Button type="normal" onClick={this.openCustomConfirmModal}>
					修改按钮文案
				</Button>
				{blank}
				<br />
				<br />
			</div>
		);
	}
}

export default ModalDemo;
```

--------------------------------

### Generate Unique GUID String in JavaScript

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-table/demos/goods-table.md

This utility function generates a pseudo-unique GUID string by concatenating two random hexadecimal strings. It's used for creating unique identifiers, particularly for product SKUs in the example data.

```javascript
function createGuid() {
  let guid = '';
  for (let i = 1; i <= 2; i += 1) {
    guid += Math.random()
      .toString(32)
      .substr(2);
  }
  return guid.replace(/^\d+/, '');
}
```

--------------------------------

### React Minimal Pagination Component

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/pagination/demos/mini-page.md

This React component demonstrates a minimal pagination setup using `cloud-react`'s `Pagination` component. It shows how to manage current page and page size state, and how to handle page changes. It also includes a disabled example for comparison.

```jsx
/**
 * title: 极简模式
 * desc: 分页极简模式仅页码用法
 */
import React from 'react';
import { Pagination, Checkbox } from 'cloud-react';

class PaginationDemo extends React.Component {
	state = {
		current: 5,
		pageSize: 10,
	};

	onChange = (current, pageSize) => {
		console.log('current: %d,pageSize: %s', current, pageSize);
		this.setState({
			current,
			pageSize
		});
	};

	render() {
		return (
          <>
            <Pagination
              type="mini-page"
              onChange={this.onChange}
              total={100}
              current={this.state.current}
              pageSize={this.state.pageSize}
            />
            <Pagination
              style={{ marginTop: 20 }}
              disabled
              type="mini-page"
              total={100}
              onChange={this.onChange}
              current={5}
              pageSize={this.state.pageSize}
            />
          </>
		);
	}
}

export default PaginationDemo;
```

--------------------------------

### React Tips Component with Descriptions

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/tips/demos/description.md

This React component demonstrates the usage of the `Tips` component from the `cloud-react` library. It shows how to display tips with a main message and an additional description, configure different tip types (default, warning, major), include icons, and add custom close buttons. It also illustrates passing an array of strings as a description.

```jsx
/**
 * title: 带描述文字的提示
 * desc:
 */

import React from 'react';
import { Tips } from 'cloud-react';

class TipsDemo extends React.Component {
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Tips
          msg="带描述的提示"
          description="这里是描述性文字 这里是描述性文字 这里是描述性文字"
        />

        <Tips
          type="warning"
          isShowIcon
          msg="<div>不仅有描述 还有icon和关闭</div>"
          description="这里是描述性文字 这里是描述性文字 这里是描述性文字"
          closeIcon="close-line"
        />

        <Tips
          type="major"
          isShowIcon
          msg={<div style={{ color: 'red' }}>传个数组试试</div>}
          description={[
            '1.这里是描述性文字',
            '2.这里是描述性文字',
            '3.这里是描述性文字',
          ]}
          closeIcon="close-line"
        />
      </div>
    );
  }
}
export default TipsDemo;
```

--------------------------------

### CTable with Time Range Column Types

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-table/demos/uniform_time_range.md

This example showcases the CTable component from 'cloud-react', demonstrating how to configure columns to display time ranges with different formats (e.g., full datetime, date only, month/day, time only). It uses `type: 'TIME_RANGE'` and `typeConfig` to specify start and end keys, and formatting options.

```jsx
/**
 * title: 时间范围类型
 * desc: 时间范围类型
 */
import React from 'react';
import { CTable } from 'cloud-react';

const data = [
  { startTime: '2021/12/14 10:19:02', endTime: '2023/08/14 10:19:02' },
  { startTime: '2021/12/13 15:47:33', endTime: '2023/08/14 10:19:02' },
  { startTime: '', endTime: '2023/08/14 10:19:02' },
  { startTime: '2021-12-13 11:14:40', endTime: '' },
  { startTime: '', endTime: '' },
];

const columns = [
  {
    title: '年月日时分秒',
    dataIndex: 'startTime',
    width: 160,
    type: 'TIME_RANGE',
    typeConfig: {
      startKey: 'startTime',
      endKey: 'endTime',
    },
  },
  {
    title: '年月日',
    dataIndex: 'startTime',
    width: 130,
    type: 'TIME_RANGE',
    typeConfig: {
      format: 'YYYY-MM-DD',
      startKey: 'startTime',
      endKey: 'endTime',
    }
  },
  {
    title: '年月',
    dataIndex: 'startTime',
    width: 90,
    type: 'TIME_RANGE',
    typeConfig: {
      format: 'YYYY-MM',
      startKey: 'startTime',
      endKey: 'endTime',
    }
  },
  {
    title: '月日',
    dataIndex: 'startTime',
    width: 90,
    type: 'TIME_RANGE',
    typeConfig: {
      format: 'MM-DD',
      startKey: 'startTime',
      endKey: 'endTime',
    }
  },
  {
    title: '时分秒',
    dataIndex: 'startTime',
    width: 100,
    type: 'TIME_RANGE',
    typeConfig: {
      format: 'HH:MM:SS',
      startKey: 'startTime',
      endKey: 'endTime',
    }
  },
];

export default function CTableDemo() {
	return (
        <CTable
           columnData={columns}
           ajaxData={{ totals: data.length, data }}
        />
	);
}
```

--------------------------------

### Basic Usage of React Step Component

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/step/demos/basic-step.md

This example demonstrates the fundamental use of the `Step` component from the `cloud-react` library. It illustrates how to render a series of steps, control the currently active step using the `current` prop, and adjust the component's visual size with the `size` prop. Multiple instances showcase different configurations and step progressions.

```jsx
import React from 'react';
import { Step } from 'cloud-react';

const title1Style = {
	textAlign: 'center'
};
const title2Style = {
	marginTop: '100px',
	textAlign: 'center'
};

export default function StepDemo() {
	return (
		<React.Fragment>
			<h4 style={title1Style}>把大象装进冰箱分几步</h4>

			<Step current={0}>
				<Step.Item title="把冰箱门打开" />
				<Step.Item title="把大象放进去" />
				<Step.Item title="把冰箱门关上" />
			</Step>

			<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>

			<Step current={3}>
				<Step.Item title="把冰箱门打开" />
				<Step.Item title="把大象拿出来" />
				<Step.Item title="把长颈鹿放进去" />
				<Step.Item title="把冰箱门关上" />
			</Step>

			<h4 style={title2Style}>把大象装进冰箱分几步-小尺寸</h4>

			<Step current={2} size="small">
				<Step.Item title="把冰箱门打开" />
				<Step.Item title="把大象拿出来" />
				<Step.Item title="把长颈鹿放进去" />
				<Step.Item title="把冰箱门关上" />
			</Step>
		</React.Fragment>
	);
}
```

--------------------------------

### Nested Modals Example

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/modal/demos/nest.md

This React component demonstrates the creation of nested modal dialogs. It uses 'cloud-react' Button and Modal components to open a primary modal, which then contains a 'SecondModal' component. The 'SecondModal' can open another 'Modal' containing a 'ConfirmModal', which finally triggers a simple info modal. This setup illustrates how to manage visibility and interactions across multiple layers of modals.

```jsx
import React from 'react';
import { Button, Modal } from 'cloud-react';

const blank = '\u00A0';

class ModalDemo extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false
		};
	}

	// 弹出框
	openNestModal = () => {
		this.setState({
			visible: true
		});
	};

	// 确认按钮回调函数
	handleOk = () => {
		this.setState({
			visible: false
		});
	};

	// 关闭回调函数
	handleClose = () => {
		this.setState({
			visible: false
		});
	};

	handleCancel = () => {
		this.setState({
			visible: false
		});
	};

	openErrorModal = () => {};

	render() {
		return (
			<div>
				<Button type="normal" onClick={this.openNestModal}>
					打开嵌套弹出框
				</Button>
				<Modal
					ignoreFrame
					size="medium"
					visible={this.state.visible}
					onOk={this.handleOk}
					onCancel={this.handleCancel}
					onClose={this.handleClose}>
					<SecondModal />
				</Modal>
			</div>
		);
	}
}

class SecondModal extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false
		};
	}
	openInfoModal = () => {
		this.setState({
			visible: true
		});
	};

	// 关闭回调函数
	handleClose = () => {
		this.setState({
			visible: false
		});
	};

	render() {
		return (
			<div>
				<Button type="normal" onClick={this.openInfoModal}>
					信息提示弹出框
				</Button>
				<Modal size="medium" hasFooter={false} visible={this.state.visible} onClose={this.handleClose}>
					<ConfirmModal />
				</Modal>
			</div>
		);
	}
}

class ConfirmModal extends React.Component {
	openInfoModal = () => {
		Modal.info({
			body: '可以点开下面的图标查看example代码。',
			onCancel: () => {}
		});
	};

	render() {
		return (
			<Button type="normal" onClick={this.openInfoModal}>
				信息提示弹出框
			</Button>
		);
	}
}

export default ModalDemo;
```

--------------------------------

### 搜索框

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/input/demos/search.md

带有搜索按钮的输入框。搜索时，展示loading。

```jsx
import React, { useState } from 'react';
import { Input, Icon } from 'cloud-react';
import './styles/mix.less'

export default function InputDemo() {
    const placeholder = '请输入关键字搜索';
    const suffixIcon = <Icon className='input-prefix-icon' type="search" />;
    const [ value, setValue ] = useState('已输入的内容'); 
	return (
		<div className="input-demo-search-box">
			<Input suffix={suffixIcon} placeholder={placeholder} />
            <Input suffix={suffixIcon}
                placeholder={placeholder}
                value={value}
                onChange={e => setValue(e.target.value)}
                hasClear />
            <Input suffix={suffixIcon} placeholder={placeholder} disabled/>
            <Input suffix={suffixIcon} placeholder={placeholder} loading/>
		</div>
	);
}
```

--------------------------------

### Basic Usage of Cloud-React Tips Component

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/tips/demos/basic-tips.md

This React component demonstrates the fundamental usage of the `Tips` component from the `cloud-react` library. It showcases various message types (default, warning, major, success), the display of icons, and how to apply custom styles like `maxWidth` to the tips. It also illustrates rendering React nodes as message content, including emphasized text.

```jsx
            /**
             * title: 基础用法
             * desc: 
             */
import React from 'react';
import { Tips } from 'cloud-react';
import './styles/basic-tips.less';

class TipsDemo extends React.Component {
  render() {
    const tipsWidth = { maxWidth: '300px' };
    const msgReactNode = (
      <span>
        重要长显显示信息<span className="stressColor">强调文字变色</span>
      </span>
    );
    return (
      <ul className="tips-demo-list">
        <li>
          <Tips isShowIcon msg="默认提示信息"></Tips>
        </li>
        <li>
          <Tips isShowIcon msg="警告提示长显显示信息文本内容会很长很长的" type="warning"></Tips>
        </li>
        <li>
          <Tips isShowIcon msg={msgReactNode} type="major"></Tips>
        </li>
        <li>
          <Tips isShowIcon msg={msgReactNode} type="success"></Tips>
        </li>
        <li>
          <Tips
            style={tipsWidth}
            msg="自定义宽度，普通常显提示,当提示文字多时,文字全部展示，有多少展示多少普通常显提示,当提示文字多时,文字全部展示，有多少展示多少普通常显提示,当提示文字多时,文字全部展示，有多少展示多少"></Tips>
        </li>
      </ul>
    );
  }
}
export default TipsDemo;
```

--------------------------------

### CTable Row Disabling Example

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-table/demos/disabled0.md

This React JSX example illustrates how to use the `CTable` component from `cloud-react` to display tabular data. It specifically demonstrates how to mark certain rows as disabled by including `disabled: true` in their data objects. The example also covers defining columns, handling asynchronous data fetching, and integrating the table within a `Modal` component.

```jsx
/**
 * title: 表格禁用行
 * desc: 表格禁用行（设置 disabled: true 的形式）
 */
import React from 'react';
import { CTable, Modal, Button } from 'cloud-react';

const data = [
  { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', disabled: true },
  { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao' },
  { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run' },
  { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },
  { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },
  { id: '121407192', name: '继续发送手机4', createTime: '2021/12/13 11:03:07', creator: 'han.wu' },
  { id: '121407193', name: '继续发送手机5', createTime: '2021/12/13 11:03:34', creator: 'yue.ren' },
  { id: '121407194', name: '继续发送手机6', createTime: '2021/12/13 11:03:05', creator: 'wanjuan.dong', disabled: true },
  { id: '121407195', name: '继续发送手机7', createTime: '2021/12/13 11:03:55', creator: 'ying.yan' },
  { id: '121407196', name: '继续发送手机8', createTime: '2021/12/13 11:03:23', creator: 'xian.yong' }
];

const columns = [
  { title: '活动ID', dataIndex: 'id', align: 'left' },
  { title: '活动名称', dataIndex: 'name', align: 'left' },
  {
    title: '创建时间', dataIndex: 'createTime', render: val => {
      return <CTable.TimeTpl value={val} />
    }
  },
  { title: '创建人', dataIndex: 'creator', align: 'left' }
];

function CTableDemo(props) {
  return (
    <CTable
      style={{ width: '100%', height: 400 }}
      supportCheckbox
      supportPage
      rowKey="id"
      tooltipConfigs={[{
        tooltipMsg: '当前条目不可选当前条目不可选', // tooltip 展示的内容
        tooltipRowCls: 'cloud-table-row-disabled' // 需要展示 tooltip 行的类名，
      }]}
      checkedData={[data[1]]}
      pageOpts={{ pageSize: 6 }}
      columnData={columns}
      ajaxData={(params) => {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve({
              totals: data.length,
              data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
            });
          }, 500)
        })
      }}
    />
  )
}

function CTableModal(props) {
  return (
    <Modal
      visible
      title="表格"
      modalStyle={{ width: 800 }}
      onClose={props.onClose}
      onCancel={props.onClose}>
      <CTableDemo />
    </Modal>
  );
}

export default function Demo() {
  return (
    <div>
      <Button type="link" onClick={() => {
        Modal.createModal(CTableModal).open().then(res => {
          console.log(res);
        });
      }}>打开弹窗</Button>
      <CTableDemo />
    </div>
  )
}
```

--------------------------------

### Build Documentation

Source: https://github.com/shuyunff2e/cloud-react/blob/master/README.md

This command compiles and builds the project's documentation. It generates static files that can be deployed or viewed locally, providing comprehensive project information.

```bash
$ npm run docs:build
```

--------------------------------

### 分体式表格

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/c-table/demos/splitTable.md

单独控制 表格、分页 和 加载 逻辑，使用起来更加灵活。可以解决表格查询参数通过异步获取，表格需要等待参数获取完再加载，否则查询错误的问题。详见DEMO：【需求】状态下拉列表是异步获取，交互要求默认展示第一条数据。【常规写法】为了保证表格只做一次查询并且查询参数是状态列表的第一条数据，如果使用原来的组合式表格，就需要等状态列表返回后再渲染表格，会导致表格区域有短暂的空白（接口慢的话空白时间会更长）；【分体写法】如果使用分体式表格，则不存在这种问题。详细可查看 DEMO 代码

```jsx
import React, { useState, useEffect } from 'react';
import { CTable, Pagination, Select, Form } from 'cloud-react';

const fetchData = ({ pageNum, pageSize }) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: new Array(pageSize).fill(1).map((item, index) => (
          { id: 121410327 + pageNum + index, name: `手机号优先继续发送${pageNum + index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222, orderNum: '33,342', status: index % 2 === 0 ? '生效': '失效' }
        )),
        totals: 30
      })
    }, 500)
  })
}

const fetchStatusList = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { label: '生效', value: 1 },
        { label: '失效', value: 2 }
      ])
    }, 500)
  })
}

const columns = [
  { title: '活动ID', dataIndex: 'id', width: 130 },
  {
    title: '活动名称', dataIndex: 'name', width: 140, render: val => {
      return <CTable.TextTpl value={val} />
    }
  },
  {
    title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
      return <CTable.TimeTpl value={val} />
    }
  },
  {
    title: '人数',
    dataIndex: 'num',
    align: 'right',
    width: 120,
    render: val => <CTable.NumberTpl value={val} precision={0} />
  },
  { title: '创建人', dataIndex: 'creator', width: 130 }
];

export default function CTableDemo() {
  const [queryParams, setQueryParams] = useState({
    status: 1,
    pageNum: 1,
    pageSize: 10
  })
  const [loading, setLoading] = useState(false);
  const [statusList, setStatusList] = useState([]);
  const [ajaxData, setAjaxData] = useState({ data: [], totals: 0 });
  
  useEffect(() => {
    // 获取状态下拉列表
    fetchStatusList().then(res => {
      setStatusList(res);
      setQueryParams({
        ...queryParams,
        status: res[0].value
      })
    })
  }, []);
  
  useEffect(() => {
    setLoading(true);
    if (queryParams.status) {
      // 查询参数变化，则更新表格数据
      console.log('查询数据', queryParams);
      fetchData(queryParams).then(res => {
        setAjaxData({
          data: res.data,
          totals: res.totals
        })
      }).finally(() => {
        setLoading(false);
      })
    }
  }, [JSON.stringify(queryParams)])

  const onPageChange = (current, pageSize) => {
    setQueryParams({
      ...queryParams,
      pageNum: current,
      pageSize,
    })
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div>
        <Form.Item label="状态：">
          <Select
            value={queryParams.status}
            dataSource={statusList}
            onChange={v => {
              setQueryParams({ status: v });
            }}
          />
        </Form.Item>
      </div>
      <CTable
        style={{ height: 400 }}
        columnData={columns}
        ajaxData={ajaxData}
        loadingOpts={{
          loading,
          layer: true
        }}
      />
      <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: 20 }}>
        <Pagination
          type="simple"
          onChange={onPageChange}
          total={100}
          current={queryParams.pageNum}
          pageSize={queryParams.pageSize}
          disabled={loading}
        />
      </div>
    </div>
  );
}
```

--------------------------------

### React Layout Component with Left and Right Siders

Source: https://github.com/shuyunff2e/cloud-react/blob/master/src/components/layout/demos/sider.md

This React component demonstrates how to use the `Layout` component from `cloud-react` to create page structures with a sidebar. It includes two examples: one with the `Sider` positioned on the left of the `Content` area, and another with the `Sider` on the right. It imports `Layout` from `cloud-react` and uses local styles from `sider.less`.

```jsx
/**
 * title: 侧边栏
 * desc: 侧边栏包含在中间
 */
import React, { Component } from 'react';
import { Layout } from 'cloud-react';
import './styles/sider.less'


const { Header, Sider, Content, Footer } = Layout;

class LayoutDemo extends Component {

	render() {

		return (
			<React.Fragment>
				<h3>侧边栏在左边</h3>
				<Layout>
					<Header>Header</Header>
					<Layout hasSider>
						<Sider>Sider</Sider>
						<Content>Content</Content>
					</Layout>
					<Footer>Footer</Footer>
				</Layout>
				<h3>侧边栏在右边</h3>
				<Layout>
					<Header>Header</Header>
					<Layout hasSider>
						<Content>Content</Content>
						<Sider>Sider</Sider>
					</Layout>
					<Footer>Footer</Footer>
				</Layout>
			</React.Fragment>
		);
	}
}
export default LayoutDemo;
```