Skill: frank17008/pcloud-components-usage (version 1.0.0)

--- 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 styles

path: references/components-index.md
content: # 组件索引 - 使用场景快速查找

## 按场景查找

| 场景 | 推荐组件 | 详细文档位置 |
|------|----------|-------------|
| **需要提交表单** | DForm | `src/DForm/index.zh-CN.md` |
| **表格列表页面** | DTable | `src/DTable/index.zh-CN.md` |
| **增删改查一体化** | CRUD | `src/CRUD/index.zh-CN.md` |
| **搜索 + 表格** | DForm + DTable | 各自文档 |
| **文件上传** | DUpload | `src/DUpload/index.zh-CN.md` |
| **弹窗表单** | ModalForm | `src/ModalForm/index.zh-CN.md` |
| **登录页面** | LoginForm | `src/LoginForm/index.zh-CN.md` |
| **权限控制** | AuthComponent | `src/AuthComponent/index.zh-CN.md` |
| **无数据展示** | NoData | `src/NoData/index.zh-CN.md` |
| **加载状态** | Loading | `src/Loading/index.zh-CN.md` |
| **级联选择** | DCascader | `src/DCascader/index.zh-CN.md` |
| **树选择** | DTreeSelect | `src/DTreeSelect/index.zh-CN.md` |
| **下拉选择** | DSelect | `src/DSelect/index.zh-CN.md` |

## 组件类别速查

### 表单类 (8)
DForm | DInput | DSelect | DCascader | DTreeSelect | DUpload | DRangePicker | DynamicFormItem

### 数据展示类 (12)
DTable | LabelValue | WordCloud | ScrollNumber | AspectRatio | NoData | IPAddress | AnimatedScrollList | OrgTree | TypewriterText | ErrorBoundary | IconFont

### 模态框类 (3)
DModal | ModalForm | LoginForm

### 功能类 (12)
Loading | ContextMenu | AdvancedFilter | InfiniteScrollList | PictureCard | SignaturePad | RndDrag | RCropper | CRUD | AuthComponent | ColorPicker | ConfigProvider

## 查找组件文档

直接读取 `src/组件名/index.zh-CN.md` 获取完整 API 文档。

示例: 查找 DForm 文档
```
Read: src/DForm/index.zh-CN.md
```

示例: 搜索某个 API
```
Grep: "DFormProps" include: "index.zh-CN.md" path: "src"
```

path: references/docs/guide.zh-CN.md
content: ---
title: 简介
nav:
  title: 指南
  order: 1
group:
  title: 介绍
  order: -1
---

# 这是什么?

这是一个基于 Antd 封装的轻量级 React 业务组件库

<!-- ## 特性 -->

<!-- <Features></Features> -->

## 问题反馈

如果在使用过程中发现任何问题、或者有改善建议，欢迎在 [**Gitlab Issues**](http://192.168.101.96:8090/pointcloud_frontend/basiclibrary/pcloud-components/issues) 进行反馈, 或者发送邮件至`[REDACTED_SECRET]`。


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)