@pt/react-common
上手指南
快速上手使用 @pt/react-common 组件库
简介
@pt/react-common 是一个中台业务通用组件库，包含核心 UI 组件、业务 Hooks、状态管理及通用插件。它采用了模块化设计，支持完全的按需引入（Tree Shaking）。
安装
pnpm add @pt/react-common引用方式 (按需导入)
为了获得最佳的类型提示和打包体积，建议根据功能模块进行按需导入。该包暴露了以下子路径：
| 导入路径 | 说明 | 示例 |
|---|---|---|
@pt/react-common/components | UI 组件 (MarkdownCompiler, AuthGuard 等) | import { AuthGuard } from '@pt/react-common/components'; |
@pt/react-common/hooks | 业务 Hooks (useMqtt, useAuth 等) | import { useMqtt } from '@pt/react-common/hooks'; |
@pt/react-common/stores | 状态管理 (Zustand stores) | import { useAuthStore } from '@pt/react-common/stores'; |
@pt/react-common/utils | 工具函数 | import { formatDate } from '@pt/react-common/utils'; |
@pt/react-common/routers | 路由配置及相关工具 | import { AppRouter } from '@pt/react-common/routers'; |
@pt/react-common/plugins | 插件及扩展 | import { ptPlugin } from '@pt/react-common/plugins'; |
@pt/react-common/style | 样式文件 | import '@pt/react-common/style'; |
示例
// 导入组件
import { AuthGuard } from "@pt/react-common/components";
// 导入 Hook
import { useMqtt } from "@pt/react-common/hooks";
// 导入样式 (通常在项目入口文件 main.tsx/app.tsx 中引入)
import "@pt/react-common/style";运行环境
- Node.js: >=18.0.0
- React: >=18.0.0