Use when developer needs to install, use, or look up components from @pointcloud/pcloud-components npm package
---
name: pcloud-components-usage
description: Use when developer needs to install, use, or look up components from @pointcloud/pcloud-components npm package
---
# pcloud-components Usage Guide
## Overview
`@pointcloud/pcloud-components` is a React component library based on Ant Design v4.24.16 and React v18. Contains 30+ business components for enterprise mid-backend products.
## Quick Start
### Installation
```bash
# npm
npm install @pointcloud/pcloud-components
# yarn
yarn add @pointcloud/pcloud-components
# pnpm
pnpm add @pointcloud/pcloud-components
```
### Peer Dependencies (Required)
```bash
npm install @ant-design/icons@^4.8.3 antd@^4.24.16 react@18 react-dom@18
```
### Basic Usage
```jsx
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;
```
### Using Form Components (DForm)
```jsx
import { DForm } 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>;
};
```
### UMD/CDN Usage
```html
<link rel="stylesheet" href="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.css" />
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.js"></script>
```
## Component List
### Form Components
| Component | Description |
| --------- |-------------|
| DForm | Enhanced form based on Ant Design Form |
| DInput | Enhanced input component |
| DSelect | Select with async loading support |
| DCascader | Cascader with async loading support |
| DTreeSelect | TreeSelect with async loading support |
| DUpload | File upload component |
| DRangePicker | Date range picker |
| DynamicFormItem | Dynamic form component |
### Data Display
| Component | Description |
| --------- |-------------|
| DTable | Enhanced table component |
| LabelValue | Label-value display component |
| WordCloud | Word cloud visualization |
| ScrollNumber | Number animation component |
| AspectRatio | Aspect ratio container |
| NoData | No data display component |
| IPAddress | IP address input component |
| AnimatedScrollList | Animated scroll list |
| OrgTree | Organization tree component |
| TypewriterText | Typewriter effect component |
| ErrorBoundary | Error boundary component |
| IconFont | Custom icon component |
### Modal
| Component | Description |
| --------- |-------------|
| DModal | Enhanced modal component |
| ModalForm | Modal form component |
| LoginForm | Login form component |
### Other Components
| Component | Description |
| --------- |-------------|
| Loading | Global loading component |
| ContextMenu | Right-click menu component |
| AdvancedFilter | Advanced filter component |
| InfiniteScrollList | Infinite scroll list |
| PictureCard | Picture card component |
| SignaturePad | Signature pad component |
| RndDrag | Draggable resizable component |
| RCropper | Image cropper component |
| CRUD | CRUD operation component |
| AuthComponent | Permission component |
| ColorPicker | Color picker component |
## Import All Components
```jsx
import * as PCloud from '@pointcloud/pcloud-components';
// PCloud.DForm, PCloud.DTable, etc.
```
## Documentation
Online docs: https://frank17008.github.io/pcloud-components
## Detailed Component Reference
所有组件的详细文档已内置在 skill 中,位置: `references/docs/组件名.md`
### 表单组件
| 组件 | 文档 |
|------|------|
| DForm | `references/docs/DForm.md` |
| DInput | `references/docs/DInput.md` |
| DSelect | `references/docs/DSelect.md` |
| DCascader | `references/docs/DCascader.md` |
| DTreeSelect | `references/docs/DTreeSelect.md` |
| DUpload | `references/docs/DUpload.md` |
| DRangePicker | `references/docs/DRangePicker.md` |
| DynamicFormItem | `references/docs/DynamicFormItem.md` |
### 数据展示组件
| 组件 | 文档 |
|------|------|
| DTable | `references/docs/DTable.md` |
| NoData | `references/docs/NoData.md` |
| Loading | `references/docs/Loading.md` |
| LabelValue | `references/docs/LabelValue.md` |
| ScrollNumber | `references/docs/ScrollNumber.md` |
| TypewriterText | `references/docs/TypewriterText.md` |
| WordCloud | `references/docs/WordCloud.md` |
| AspectRatio | `references/docs/AspectRatio.md` |
| AnimatedScrollList | `references/docs/AnimatedScrollList.md` |
| ErrorBoundary | `references/docs/ErrorBoundary.md` |
| IconFont | `references/docs/IconFont.md` |
| IPAddress | `references/docs/IPAddress.md` |
| OrgTree | `references/docs/OrgTree.md` |
### 模态框组件
| 组件 | 文档 |
|------|------|
| DModal | `references/docs/DModal.md` |
| ModalForm | `references/docs/ModalForm.md` |
| LoginForm | `references/docs/LoginForm.md` |
### 其他组件
| 组件 | 文档 |
|------|------|
| CRUD | `references/docs/CRUD.md` |
| AdvancedFilter | `references/docs/AdvancedFilter.md` |
| ContextMenu | `references/docs/ContextMenu.md` |
| InfiniteScrollList | `references/docs/InfiniteScrollList.md` |
| PictureCard | `references/docs/PictureCard.md` |
| SignaturePad | `references/docs/SignaturePad.md` |
| RndDrag | `references/docs/RndDrag.md` |
| RCropper | `references/docs/RCropper.md` |
| AuthComponent | `references/docs/AuthComponent.md` |
| ColorPicker | `references/docs/ColorPicker.md` |
| ConfigProvider | `references/docs/ConfigProvider.md` |
### 在线文档
如需最新在线版本: https://frank17008.github.io/pcloud-components
## Environment Requirements
- React >= 18
- Ant Design <= 6.x
- Node >= 16.20.0
- Modern browsers
## Common Issues
1. **Missing peer dependencies**: Ensure `@ant-design/icons`, `antd`, `react`, `react-dom` are installed
2. **Version mismatch**: This library requires React 18 and Ant Design 4.x
3. **Style not loading**: Import component CSS or use ConfigProvider for global stylesdon't have the plugin yet? install it then click "run inline in claude" again.