📦 pcloud-components-usage — pcloud 组件用法

pcloud-components 使用指南概述 @pointcloud/pcloud-components 是一个基于 Ant Design v4.24.16 和 React v18 的 React 组件库。包含 30+ 个企业级中后台产品的业务组件。

快速开始 安装 # npm npm install @pointcloud/pcloud-components # yarn yarn add @pointcloud/pcloud-components # pnpm pnpm add @pointcloud/pcloud-components

对等依赖（必需） npm install @ant-design/icons@^4.8.3 antd@^4.24.16 react@18 react-dom@18

基本使用 import React from 'react'; import { DCascader } from '@pointcloud/pcloud-components'; const App = () => { const handleChange = (value, selectedOptions) => { console.log(value, selectedOptions); }; return ; }; export default App;

使用表单组件（DForm） 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 ; };

UMD/CDN 使用

组件列表 表单组件 组件 描述 DForm 基于 Ant Design Form 的增强表单 DInput 增强输入组件 DSelect 支持异步加载的选择组件 DCascader 支持异步加载的级联组件 DTreeSelect 支持异步加载的树形选择组件 DUpload 文件上传组件 DRangePicker 日期范围选择组件 DynamicFormItem 动态表单组件

数据展示组件 组件 描述 DTable 增强表格组件 LabelValue 标签值显示组件 WordCloud 词云可视化组件 ScrollNumber 数字动画组件 AspectRatio 宽高比容器 NoData 无数据显示组件 IPAddress IP 地址输入组件 AnimatedScrollList 动态滚动列表组件 OrgTree 组织树组件 TypewriterText 打字机效果组件 ErrorBoundary 错误边界组件 IconFont 自定义图标组件

模态框组件 组件 描述 DModal 增强模态框组件 ModalForm 模态框表单组件 LoginForm 登录表单组件

其他组件 组件 描述 Loading 全局加载组件 ContextMenu 右键菜单组件 AdvancedFilter 高级筛选组件 InfiniteScrollList 无限滚动列表组件 PictureCard 图片卡片组件 SignaturePad 签名板组件 RndDrag 可拖拽缩放组件 RCropper 图片裁剪组件 CRUD CRUD 操作组件 AuthComponent 权限组件 ColorPicker 颜色选择组件

导入所有组件 import * as PCloud from '@pointcloud/pcloud-components'; // PCloud.DForm, PCloud.DTable, 等

文档 在线文档：https://frank17008.github.io/pcloud-components 详细组件参考 所有组件的详细文档已内置在 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