@pointcloud/pcloud-components

一套基于 Ant Design v4.24.16 和 React v17.0.2 开发的业务组件库，包含 30+ 个高质量组件，可帮助您快速构建企业级中后台产品原型。

🎁 组件列表

表单组件

| 组件名称 | 描述 | | ------------ | ----------------------------------- | | DForm | 基于 Ant Design Form 的增强表单组件 | | DInput | 增强版输入框组件 | | DSelect | 支持异步加载的下拉选择组件 | | DCascader | 支持异步加载的级联选择组件 | | DTreeSelect | 支持异步加载的树选择组件 | | DUpload | 文件上传组件 | | DRangePicker | 日期选择组件 | | ColorPicker | 颜色选择器组件 |

数据展示组件

| 组件名称 | 描述 | | ------------------ | ---------------- | | DTable | 增强版表格组件 | | LabelValue | 标签值展示组件 | | WordCloud | 词云组件 | | ScrollNumber | 数字滚动动画组件 | | AspectRatio | 宽高比容器组件 | | NoData | 无数据展示组件 | | IPAddress | IP 地址输入组件 | | AnimatedScrollList | 动画滚动列表组件 | | OrgTree | 组织树组件 | | TypewriterText | 打字机组件 |

模态框组件

| 组件名称 | 描述 | | --------- | ---------------- | | DModal | 增强版模态框组件 | | ModalForm | 表单模态框组件 | | LoginForm | 登录表单组件 |

其他业务组件

| 组件名称 | 描述 | | ------------------ | ------------------ | | Loading | 全局加载组件 | | ContextMenu | 右键菜单组件 | | AdvancedFilter | 高级筛选组件 | | InfiniteScrollList | 无限滚动列表组件 | | PictureCard | 图片卡片组件 | | SignaturePad | 签名板组件 | | RndDrag | 可拖拽调整大小组件 | | RCropper | 图片裁剪组件 | | CRUD | CRUD 组件 |

🚀 安装

# 使用 npm
npm install @pointcloud/pcloud-components

# 使用 yarn
yarn add @pointcloud/pcloud-components

# 使用 pnpm
pnpm add @pointcloud/pcloud-components

🔨 快速开始

通过 umd 引入时,需要先引入react和react-dom, 示例:

<link rel="stylesheet" href="https://unpkg.com/@pointcloud/[email protected]/dist/umd/pcloud-components.min.css" />
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@pointcloud/[email protected]/dist/umd/pcloud-components.min.js"></script>

1. 基础使用

import React from 'react';
import { DCascader } from '@pointcloud/pcloud-components';

const App = () => {
  const handleChange = (value, selectedOptions) => {
    console.log(value, selectedOptions);
  };

  return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
};

export default App;

2. 使用表单组件

import React from 'react';
import { DForm, DInput, DSelect } from '@pointcloud/pcloud-components';

const App = () => {
  const onFinish = (values) => {
    console.log('表单值:', values);
  };
  const items = [
    {
      label: '用户名',
      name: 'username',
      rules: [{ required: true, message: '请输入用户名' }],
      renderType: 'input',
    },
    {
      label: '状态',
      name: 'status',
      rules: [{ required: true, message: '请选择状态' }],
      renderType: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
    {
      label: '提交',
      renderType: 'button',
      type: 'primary',
      htmlType: 'submit',
    },
  ];

  return <DForm onFinish={onFinish} items={items}></DForm>;
};

export default App;

📖 详细文档

访问我们的在线文档查看完整的组件列表和使用示例。

⚙️ 环境支持

• React < 18
• Ant Design <= 4.24.16
• Node >= 16.20.0
• Modern browsers