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

# npm
npm install @pointcloud/pcloud-components

# yarn
yarn add @pointcloud/pcloud-components

# pnpm
pnpm add @pointcloud/pcloud-components

Peer Dependencies (Required)

npm install @ant-design/icons@^4.8.3 antd@^4.24.16 react@18 react-dom@18

Basic Usage

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

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

  return \x3CDCascader showSearch placeholder="请选择" onChange={handleChange} />;
};

export default App;

Using Form Components (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 \x3CDForm onFinish={onFinish} items={items}>\x3C/DForm>;
};

UMD/CDN Usage

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

Component List

Form Components

Data Display

Modal

Other Components

Import All Components

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

表单组件

数据展示组件

模态框组件

其他组件

在线文档

如需最新在线版本: https://frank17008.github.io/pcloud-components

Environment Requirements

• React >= 18
• Ant Design \x3C= 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