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#

ComponentDescriptionDFormEnhanced form based on Ant Design FormDInputEnhanced input componentDSelectSelect with async loading supportDCascaderCascader with async loading supportDTreeSelectTreeSelect with async loading supportDUploadFile upload componentDRangePickerDate range pickerDynamicFormItemDynamic form component

Data Display#

ComponentDescriptionDTableEnhanced table componentLabelValueLabel-value display componentWordCloudWord cloud visualizationScrollNumberNumber animation componentAspectRatioAspect ratio containerNoDataNo data display componentIPAddressIP address input componentAnimatedScrollListAnimated scroll listOrgTreeOrganization tree componentTypewriterTextTypewriter effect componentErrorBoundaryError boundary componentIconFontCustom icon component

Modal#

ComponentDescriptionDModalEnhanced modal componentModalFormModal form componentLoginFormLogin form component

Other Components#

ComponentDescriptionLoadingGlobal loading componentContextMenuRight-click menu componentAdvancedFilterAdvanced filter componentInfiniteScrollListInfinite scroll listPictureCardPicture card componentSignaturePadSignature pad componentRndDragDraggable resizable componentRCropperImage cropper componentCRUDCRUD operation componentAuthComponentPermission componentColorPickerColor 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

表单组件#

组件文档DFormreferences/docs/DForm.mdDInputreferences/docs/DInput.mdDSelectreferences/docs/DSelect.mdDCascaderreferences/docs/DCascader.mdDTreeSelectreferences/docs/DTreeSelect.mdDUploadreferences/docs/DUpload.mdDRangePickerreferences/docs/DRangePicker.mdDynamicFormItemreferences/docs/DynamicFormItem.md

数据展示组件#

组件文档DTablereferences/docs/DTable.mdNoDatareferences/docs/NoData.mdLoadingreferences/docs/Loading.mdLabelValuereferences/docs/LabelValue.mdScrollNumberreferences/docs/ScrollNumber.mdTypewriterTextreferences/docs/TypewriterText.mdWordCloudreferences/docs/WordCloud.mdAspectRatioreferences/docs/AspectRatio.mdAnimatedScrollListreferences/docs/AnimatedScrollList.mdErrorBoundaryreferences/docs/ErrorBoundary.mdIconFontreferences/docs/IconFont.mdIPAddressreferences/docs/IPAddress.mdOrgTreereferences/docs/OrgTree.md

模态框组件#

组件文档DModalreferences/docs/DModal.mdModalFormreferences/docs/ModalForm.mdLoginFormreferences/docs/LoginForm.md

其他组件#

组件文档CRUDreferences/docs/CRUD.mdAdvancedFilterreferences/docs/AdvancedFilter.mdContextMenureferences/docs/ContextMenu.mdInfiniteScrollListreferences/docs/InfiniteScrollList.mdPictureCardreferences/docs/PictureCard.mdSignaturePadreferences/docs/SignaturePad.mdRndDragreferences/docs/RndDrag.mdRCropperreferences/docs/RCropper.mdAuthComponentreferences/docs/AuthComponent.mdColorPickerreferences/docs/ColorPicker.mdConfigProviderreferences/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