@erpsquad/common

中文文档

1.11.28发布于 2026/11/12MITTypeScriptESM + CJS近 30 天下载 3.7万

企业资源规划模块共享的UI组件库

文档目录63 节

* 特性
& 深度导入
深度导入( 建议)
业绩效益
快速启动深导入
发展环境
生产部署
* 安装
同伴依赖关系
QQ 快速启动
QQ 重要: 导入样式
业绩最佳做法
核心用法(最小依赖)
可用核心导出
完全使用( 有同行依赖)
带有自定义主题
QQ 主题系统
主题配置
自定义主题对象
可用颜色
& SCSS 样式
导入编译的 CSS( 建议)
使用工具类
使用SCSS变量(高级)
使用 SCSS Mixins (高级)
导入全部 SCSS 特性
模块导入系统
API 客户端
组件
窗体控件
数据显示
导航
反馈
QQ Redux 整合
与 Redux( 为复杂的应用程序推荐)
没有Redux( 简易应用程序)
可用的 Redux 切片
钩子
自定义钩
Redux 集成钩
水电费
公共事业
国际化
语言提供者
使用翻译
测试
API 参考
ERPUIProvider 推进器
组件道具
发展
图书馆的建设
运行测试
软件包验证
++ Bundle 分析
* 解决问题
共同问题
获取帮助
捐款
发展指导方针
许可证
++ 辅助
绩效文件
QQ 更改日志

@ erpsquad/ 常见

一个用于ERP应用程序的综合反应组件库,由Material-UI和TypeScript所建. 这个库提供100+可再使用的UI组件,主题系统,公用设施,钩子,以及用于构建现代ERP应用程序的可选Redux集成.

* 特性

100+ UI 组件: 一整套形式控制、数据显示、导航和布局组件
物质-UI 整合: 以自定义主题建在材料UI上
类型脚本支持: 所有组件和公用事业的完整类型脚本定义
弹性 Redux 集成: 可选的 Redux 支持 - 组件工作与 Redux 无关
主题系统: 有 RTL/LTR 支持和自定义颜色的浅/暗主题
国际化: 内建的i18n支持语言切换
最佳业绩: 90 qq 捆绑大小减少,并采用模块化进口和打树
智能代码分割: 重依赖的自动块
QQ 快装入时间:75-90%的构建配置优化后更快
无障碍:具有适当ARIA属性的WCAG兼容组件
模块结构: 只导入最小化捆绑大小所需的内容
同伴扶养管理: 不同项目设置的灵活依赖管理

& 深度导入

V1.9.98+中新增:完全深度进口支持最大性能!

深度导入( 建议)

仅导入您需要的最佳捆绑大小 :

// ✅ Deep imports (recommended) - Only ~50-150KB
import { Button } from "@erpsquad/common/components/button";
import { useAuth } from "@erpsquad/common/hooks/useAuth";
import { formatDate } from "@erpsquad/common/utils/dateFormat";

// ❌ Barrel imports (not recommended) - Imports entire library ~2.5MB
import { Button, useAuth, formatDate } from "@erpsquad/common";

业绩效益

90-97%的小捆包 有深度进口
75-90%的载重速度 以优化代码分割
有效的摇树 自动删除未使用的代码
250个以上个人入境点 用于组件、钩子、工具、上下文、图标和视图

在此之前: 2.5MB捆绑,5至8s装载时间
之后: 150-300KB捆绑,1至2s装载时间

快速启动深导入

// Components
import { Button } from "@erpsquad/common/components/button";
import { TextField } from "@erpsquad/common/components/text-field";
import { MaterialTable } from "@erpsquad/common/components/material-table";
import ProtectedRoute from "@erpsquad/common/components/protected-route";

// Hooks
import { useAuth } from "@erpsquad/common/hooks/useAuth";
import { usePermissions } from "@erpsquad/common/hooks/use-permissions";

// Utils
import { formatDate } from "@erpsquad/common/utils/dateFormat";
import { api } from "@erpsquad/common/utils/api";

// Contexts
import { AuthProvider } from "@erpsquad/common/contexts/AuthContext";

📚 见完整引用所有700多条导入路径
📋 见快速引用用于普通进口
📖 见深导入指南用于完整文件

发展环境

为本地发展,您可以创建 .env 在工程根中带有这些变量。确保添加 .env 给您的 .gitignore 用于保证敏感信息安全的文档.

生产部署

对于生产部署,将这些环境变量设置在您的主机环境配置面板上.

* 安装

npm install @erpsquad/common

同伴依赖关系

库使用对等依赖来避免版本冲突并减少捆绑大小. 根据您的用法安装所需的依赖性 :

所需(核心功能)

npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material

可选( 特有)

对于Redux集成:

npm install @reduxjs/toolkit react-redux

日期组件:

npm install @mui/x-date-pickers date-fns

数据网组件:

npm install @mui/x-data-grid

线路公用事业:

npm install react-router-dom

在国际化方面:

npm install react-i18next i18next

对于公用功能:

npm install lodash axios

完成安装( 所有特性)

# Install all peer dependencies for full functionality
npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material @reduxjs/toolkit react-redux @mui/x-date-pickers @mui/x-data-grid date-fns react-router-dom react-i18next i18next lodash axios

QQ 快速启动

QQ 重要: 导入样式

在使用任何组件之前, 您必须导入您主应用程序文件中的 CSS 文件 :

// main.tsx or App.tsx or index.tsx
import '@erpsquad/common/style.css'; // 👈 REQUIRED - Import this first!

如果没有此导入, 组件将生成但有 没有样式。。。 .

业绩最佳做法

使用模块导入实现最佳捆绑大小 :

// ✅ Good - Only loads what you need (recommended)
import { Button, TextField } from '@erpsquad/common/components';
import { useAuth } from '@erpsquad/common/hooks';
import { formatDate } from '@erpsquad/common/utils';

// ❌ Avoid - Loads entire library (deprecated in v2.0.0)
import { Button, useAuth, formatDate } from '@erpsquad/common';

影响 : 90qq 捆绑大小缩小,75qq 更快的负载时间

📚 见绩效迁移指南移民步骤

核心用法(最小依赖)

库提供核心功能而不需要所有对等依赖:

import React from 'react';
// ⚠️ IMPORTANT: Import styles first (in your main file)
import '@erpsquad/common/style.css';

import {
    configureLibrary,
    getLibraryConfig,
    images,
    DEFAULT_LANG,
    type LibraryConfig
} from '@erpsquad/common';

// Configure library for your application
const config: LibraryConfig = {
    routes: {
        login: '/auth/login',
        dashboard: '/dashboard'
    },
    validation: {
        emailRequired: true,
        phoneRequired: false
    },
    dataTransforms: {
        dateFormat: 'dd/MM/yyyy'
    }
};

configureLibrary(config);

function App() {
    const currentConfig = getLibraryConfig();

    return (
        <div>
            <img src={images.logo} alt='Logo' />
            <p>Default language: {DEFAULT_LANG}</p>
            <p>Login route: {currentConfig.routes?.login}</p>
        </div>
    );
}

export default App;

可用核心导出

下列出口没有同伴依赖关系:

// Configuration system
import {
    configureLibrary,
    getLibraryConfig,
    getConfigFunction,
    type LibraryConfig
} from '@erpsquad/common';

// Static assets
import { default as images } from '@erpsquad/common';

// Constants
import { DEFAULT_LANG, LANGUAGES, S3_BUCKET_URL } from '@erpsquad/common';

// TypeScript types
import type {
    BaseComponentProps,
    ThemeConfig,
    SelectOption,
    TableColumn,
    User,
    Permission
} from '@erpsquad/common';

完全使用( 有同行依赖)

在安装对等依赖后, 您可以使用所有组件 :

import React from 'react';
// ⚠️ Import styles first!
import '@erpsquad/common/style.css';

// Note: Import from specific paths to avoid dependency issues
import { ERPUIProvider } from '@erpsquad/common/contexts';
import { Button, TextField } from '@erpsquad/common/components';

function App() {
    return (
        <ERPUIProvider>
            <div>
                <TextField label='Name' variant='outlined' />
                <Button variant='contained' color='primary'>
                    Submit
                </Button>
            </div>
        </ERPUIProvider>
    );
}

export default App;

带有自定义主题

import React from 'react';
// ⚠️ Import styles first!
import '@erpsquad/common/style.css';

import { ERPUIProvider } from '@erpsquad/common/contexts';
import { Button } from '@erpsquad/common/components';
import { createLightTheme } from '@erpsquad/common/theme';

function App() {
    const { theme } = createLightTheme('#2196f3', 'ltr');

    return (
        <ERPUIProvider
            theme={theme}
            themeMode='dark'
            primaryColor='#2196f3'
            enableCssBaseline={true}>
            <Button variant='contained'>Dark Theme Button</Button>
        </ERPUIProvider>
    );
}

QQ 主题系统

图书馆包括一个综合主题系统,支持光/暗模式、RTL/LTR方向和自定义颜色.

主题配置

import { ERPUIProvider } from '@erpsquad/common/contexts';

<ERPUIProvider
    themeMode='light' // 'light' | 'dark'
    primaryColor='#1976d2' // Any valid color
    direction='ltr' // 'ltr' | 'rtl'
    enableCssBaseline={true}>
    <App />
</ERPUIProvider>;

自定义主题对象

import { createLightTheme, createDarkTheme } from '@erpsquad/common/theme';
import { ERPUIProvider } from '@erpsquad/common/contexts';

// Create custom theme
const { theme } = createLightTheme('#1976d2', 'ltr');

// Or create dark theme
const { darkTheme } = createDarkTheme('#1976d2', 'ltr');

<ERPUIProvider theme={theme}>
    <App />
</ERPUIProvider>;

可用颜色

库支持各种颜色格式 :

十六进制颜色 : #1976d2
RGB: (英语) rgb(25, 118, 210)
颜色名称 : blue, (中文(简体) ), red, (中文(简体) ), green
材料- UI 颜色对象

& SCSS 样式

该图书馆提供一套全面的造型系统,其中包含编译的CSS,SCSS变量,混音,公用类和动画.

导入编译的 CSS( 建议)

将此添加到您的主应用程序文件中 :

// main.tsx or App.tsx
import '@erpsquad/common/style.css';

这给你:

所有组件样式
快速发展的公用事业类
响应样式
动画

使用工具类

<div className="d-flex justify-content-center align-items-center mb-2">
  <h1 className="h2 bold">Welcome</h1>
  <p className="s2 normal text-center">Description text</p>
</div>

可用的工具类 :

版式数字 : d-flex, (中文(简体) ), flex-direction-column, (中文(简体) ), justify-content-center, (中文(简体) ), align-items-center
间距数字 : mb-1, (中文(简体) ), mt-2, (中文(简体) ), p-0, (中文(简体) ), pl-2 (铺设/边缘设施)
类型数字 : h1- 说吧h5 (标题), s1- 说吧s5 (正文), (中文(简体) ), bold, (中文(简体) ), medium, (中文(简体) ), normal
宽度/ 高数字 : w-100, (中文(简体) ), w-50, (中文(简体) ), h-100, (中文(简体) ), vh-100
文本对齐数字 : text-center, (中文(简体) ), text-left, (中文(简体) ), text-right

使用SCSS变量(高级)

导入您的 SCSS 变量 .scss 文件 :

// your-component.scss
@import '@erpsquad/common/styles/variables';

.custom-component {
  background-color: $primary-600;
  color: $neutral-100;
  border: 1px solid $neutral-300;
}

可用色度( 100-1000) :

$primary-* (绿色), $neutral-* (gray), (英语), $error-* (红色)
$blue-*, (中文(简体) ), $magenta-*, (中文(简体) ), $olive-*, (中文(简体) ), $green-*, (中文(简体) ), $lightGreen-*

使用 SCSS Mixins (高级)

// your-component.scss
@import '@erpsquad/common/styles/mixins';

.responsive-layout {
  @include flex(center, space-between, row);
  
  @include media-md {
    flex-direction: column;
  }
}

可用混音符 :

@include flex($align, $justify, $direction) - Flexbox 缩写
@include transition($time, $motion) - 过渡简写
@include center - 绝对中心定位
响应断点 : @include media-sm, (中文(简体) ), @include media-md, (中文(简体) ), @include media-l等 (中文(简体) ).

导入全部 SCSS 特性

// For complete access to variables, mixins, utilities, and animations
@import '@erpsquad/common/styles/all';

详细文档样式见:

模块导入系统

该图书馆使用模块化的导入系统来防止依赖性问题. 根据您的需要从特定路径导入 :

// Core functionality (no peer dependencies required)
import { configureLibrary, images } from '@erpsquad/common';

// Components (requires React, MUI peer dependencies)
import { Button, TextField } from '@erpsquad/common/components';

// Hooks (requires React peer dependencies)
import { useAuth, useLanguage } from '@erpsquad/common/hooks';

// Contexts (requires React peer dependencies)
import { ERPUIProvider, AuthProvider } from '@erpsquad/common/contexts';

// Theme utilities (requires MUI peer dependencies)
import { createLightTheme, createDarkTheme } from '@erpsquad/common/theme';

// Utility functions (may require specific peer dependencies)
import { formatDate, validateEmail } from '@erpsquad/common/utils';

// Redux integration (requires Redux peer dependencies)
import { createLibraryStore, slices } from '@erpsquad/common/redux';

// API clients (requires axios peer dependency)
import { AccountingAPI, InventoryAPI } from '@erpsquad/common/api-client';

// Styles (CSS bundle - recommended)
import '@erpsquad/common/style.css';

// Styles (SCSS imports for advanced usage)
// Import in .scss files only:
// @import '@erpsquad/common/styles/variables';
// @import '@erpsquad/common/styles/mixins';
// @import '@erpsquad/common/styles/all';

API 客户端

图书馆包括不同企业资源规划模块的预先配置的API客户端:

import {
    AccountingAPI,
    InventoryAPI,
    ManufacturingAPI,
    PurchaseAPI,
    SalesAPI,
    RentalAPI,
    RbacAPI,
    DriveAPI,
    SystemFeatureAPI
} from '@erpsquad/common/api-client';

// Configure base API client
const baseConfig = {
    baseURL: 'https://api.example.com',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json'
    }
};

// Use specific API clients
const accountingClient = new AccountingAPI(baseConfig);
const inventoryClient = new InventoryAPI(baseConfig);

// Example usage
const users = await accountingClient.getUsers();
const products = await inventoryClient.getProducts();

组件

窗体控件

import {
  TextField,
  Select,
  DatePicker,
  Checkbox,
  Radio,
  ToggleSwitch,
  Button
} from '@erpsquad/common/components';

// Text input
<TextField
  label="Email"
  type="email"
  variant="outlined"
  required
/>

// Select dropdown
<Select
  label="Country"
  options={countries}
  value={selectedCountry}
  onChange={handleCountryChange}
/>

// Date picker (requires @mui/x-date-pickers)
<DatePicker
  label="Birth Date"
  value={birthDate}
  onChange={setBirthDate}
/>

数据显示

import {
  MaterialTable,
  Grid,
  CardWrapper,
  Avatar,
  Chip
} from '@erpsquad/common/components';

// Data table (requires @mui/x-data-grid)
<MaterialTable
  columns={columns}
  data={data}
  title="Users"
  options={{
    search: true,
    pagination: true,
    sorting: true
  }}
/>

// Grid layout
<Grid container spacing={2}>
  <Grid item xs={12} md={6}>
    <CardWrapper>Content</CardWrapper>
  </Grid>
</Grid>

import {
  Sidebar,
  BreadCrumb,
  Pagination,
  Tabs
} from '@erpsquad/common/components';

// Sidebar navigation
<Sidebar
  items={navigationItems}
  collapsed={isCollapsed}
  onItemClick={handleNavigation}
/>

// Breadcrumb (requires react-router-dom for navigation)
<BreadCrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Users', href: '/users' },
    { label: 'Profile' }
  ]}
/>

反馈

import {
  CustomSnackbar,
  Toast,
  Loader,
  Alert,
  Modal
} from '@erpsquad/common/components';

// Loading indicator
<Loader size="large" text="Loading data..." />

// Alert message
<Alert severity="success" onClose={handleClose}>
  Operation completed successfully!
</Alert>

// Snackbar notification
<CustomSnackbar
  open={isOpen}
  message="Operation completed successfully!"
  severity="success"
  onClose={handleClose}
/>

// Modal dialog
<Modal
  open={isOpen}
  onClose={handleClose}
  title="Confirm Action"
  actions={[
    { label: 'Cancel', onClick: handleClose },
    { label: 'Confirm', onClick: handleConfirm, variant: 'contained' }
  ]}
>
  Are you sure you want to proceed?
</Modal>

QQ Redux 整合

库提供灵活的Redux集成,与Redux或没有Redux一起工作. 要求数 @reduxjs/toolkit 财务报告和审定财务报表 react-redux 相对依赖.

与 Redux( 为复杂的应用程序推荐)

import { ERPUIProvider } from '@erpsquad/common/contexts';
import {
    createLibraryStore,
    createConfiguredApiClient
} from '@erpsquad/common/redux';
import { ShareModal } from '@erpsquad/common/components';

// Configure API client
const apiClient = createConfiguredApiClient(baseApiClient, () => ({
    authorization: `Bearer ${getAuthToken()}`
}));

// Create store with library slices
const store = createLibraryStore(
    {
        // Your app reducers
        app: appReducer,
        user: userReducer
    },
    apiClient
);

function App() {
    return (
        <ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>
            <ShareModal useRedux={true} />
        </ERPUIProvider>
    );
}

没有Redux( 简易应用程序)

import { ERPUIProvider } from '@erpsquad/common/contexts';
import { ShareModal } from '@erpsquad/common/components';

function App() {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);

    const fetchUsers = async () => {
        setLoading(true);
        try {
            const response = await api.getUsers();
            setUsers(response.data);
        } finally {
            setLoading(false);
        }
    };

    return (
        <ERPUIProvider useRedux={false}>
            <ShareModal
                useRedux={false}
                users={users}
                loading={loading}
                onFetchUsersAndDepartments={fetchUsers}
            />
        </ERPUIProvider>
    );
}

可用的 Redux 切片

共享切片: 共享功能的用户和部门数据
页眉Slice: 语言数据和当前语言选择
报告: 用于过滤报告的公司数据
清单报告: 报告与清单有关的数据

钩子

自定义钩

import {
    useAuth,
    useLanguage,
    usePermissions,
    usePages,
    useDeepMemo,
    useReduxIntegration
} from '@erpsquad/common/hooks';

// Authentication hook
const { user, isAuthenticated, login, logout } = useAuth();

// Language hook (requires react-i18next)
const { currentLanguage, changeLanguage, t } = useLanguage();

// Permissions hook
const { hasPermission, checkPermission } = usePermissions();

// Deep memoization hook
const memoizedValue = useDeepMemo(() => expensiveCalculation(data), [data]);

Redux 集成钩

import { useReduxIntegration } from '@erpsquad/common/hooks';

const MyComponent = ({ useRedux, ...props }) => {
    const { data, loading, error, actions } = useReduxIntegration({
        useRedux,
        sliceName: 'share',
        fallbackData: props.users,
        fallbackLoading: props.loading,
        fallbackActions: {
            fetchData: props.onFetchUsers
        }
    });

    // Component logic using unified interface
};

水电费

公共事业

import {
    formatDate,
    formatFileSize,
    formatText,
    deformatText,
    colorUtils
} from '@erpsquad/common/utils';

// Date formatting (requires date-fns)
const formattedDate = formatDate(new Date(), 'dd/MM/yyyy');

// File size formatting
const fileSize = formatFileSize(1024000); // "1.02 MB"

// Text formatting
const formatted = formatText('hello world', 'title'); // "Hello World"

// Color utilities
const hexColor = colorUtils.rgbToHex(255, 0, 0); // "#ff0000"

国际化

要求数 react-i18next 财务报告和审定财务报表 i18next 相对依赖.

语言提供者

import { ERPUIProvider } from '@erpsquad/common/contexts';

<ERPUIProvider
    enableLanguage={true}
    // Other props
>
    <App />
</ERPUIProvider>;

使用翻译

import { useLanguage } from '@erpsquad/common/hooks';

const MyComponent = () => {
    const { t, currentLanguage, changeLanguage } = useLanguage();

    return (
        <div>
            <p>{t('common.welcome')}</p>
            <button onClick={() => changeLanguage('es')}>Switch to Spanish</button>
        </div>
    );
};

测试

图书馆包括综合测试设施:

import { render, screen } from '@testing-library/react';
import { ERPUIProvider } from '@erpsquad/common/contexts';
import { Button } from '@erpsquad/common/components';

test('renders button correctly', () => {
    render(
        <ERPUIProvider>
            <Button>Click me</Button>
        </ERPUIProvider>
    );

    expect(screen.getByRole('button')).toBeInTheDocument();
});

API 参考

ERPUIProvider 推进器

Prop	类型	默认	说明
`useRedux`	`boolean`	`false`	启用 Redux 集成
`reduxStore`	`Store`	`undefined`	自定义 Redux 存储
`apiClient`	`ApiClientConfig`	`undefined`	API 客户端配置
`themeMode`	`'light' \| 'dark'`	`'light'`	主题模式
`primaryColor`	`string`	`undefined`	主要主题颜色
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	文本方向
`enableAuth`	`boolean`	`true`	启用认证上下文
`enableLanguage`	`boolean`	`true`	启用语言上下文
`enableRouter`	`boolean`	`false`	启用路由器提供者
`enableSnackbar`	`boolean`	`true`	启用小吃栏提供者

组件道具

所有组件都延长各自的材料UI组件道具,并增加企业资源规划专用功能。详细信息请参见各组成部分文件.

发展

图书馆的建设

# Production build
npm run build

# Build with analysis
npm run build:analyze

# Build with validation
npm run build:validate

# Clean build artifacts
npm run clean

运行测试

# Run all tests
npm test

# Run tests in CI mode
npm run test:ci

# Type checking
npm run type-check

# Linting
npm run lint
npm run lint:fix

软件包验证

# Validate package structure
npm run validate:package

# Check bundle size limits
npm run size-check

# Full validation (lint + type-check + test + build)
npm run validate

++ Bundle 分析

# Analyze bundle size and composition
npm run build:analyze

# Check size limits against configuration
npm run size-check

# Validate package contents before publishing
npm run validate:package

* 解决问题

共同问题

** 组件没有样式

问题: 组件渲染但无样式 / 外观没有样式 .

解决方案: 您必须在您的应用程序中导入 CSS 文件 :

// In your main file (main.tsx, App.tsx, or index.tsx)
import '@erpsquad/common/style.css'; // 👈 Add this!

// Then import components
import { Button } from '@erpsquad/common/components';

为什么: 组件样式分别捆绑,以达到最佳的树摇和加载性能. CSS 文件必须在您的应用程序入口处明确导入一次 .

导入出错

# Error: Cannot resolve '@erpsquad/common/components'
# Solution: Install required peer dependencies
npm install @mui/material @emotion/react @emotion/styled

# Error: Module not found
# Solution: Use correct import paths
import { Button } from '@erpsquad/common/components'; // ✅ Correct
import { Button } from '@erpsquad/common'; // ❌ Incorrect for components

同伴依赖性警告

# Warning: peer dependency not installed
# Solution: Install the specific peer dependency
npm install react-redux @reduxjs/toolkit

# Or install all peer dependencies
npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material

类型脚本出错

# Error: Cannot find type definitions
# Solution: Ensure TypeScript types are properly imported
import type { LibraryConfig } from '@erpsquad/common';

# Error: Module has no exported member
# Solution: Check if the export requires peer dependencies
import { useAuth } from '@erpsquad/common/hooks'; // Requires React

构建问题

# Error: Module not found during build
# Solution: Check if all peer dependencies are installed
# and properly configured in your build tool

# For Vite projects, add to vite.config.ts:
export default defineConfig({
  optimizeDeps: {
    include: ['@erpsquad/common']
  }
});

# For Webpack projects, ensure proper externals configuration

获取帮助

检查解决问题指南
审查移徙证件
搜索现有问题
创建一个新问题

捐款

叉子存储器
创建特性分支 : git checkout -b feature/new-component
更改并添加测试
运行测试 : npm test
运行林入 : npm run lint
提交更改 : git commit -m 'Add new component'
推到树枝上: git push origin feature/new-component
提交拉动请求

发展指导方针

遵循类型脚本最佳做法
为新组件编写综合测试
更新 API 更改的文档
确保无障碍合规
保持后向兼容性

许可证

麻省理工学院的执照 - 看自由主义详细文件.

++ 辅助

文档数字 : 图书馆文件
问题数字 : GitHub 问题
国家防范机制一揽子计划数字 : @ erpsquad/ 常见
更改日志数字 : 变动情况
移徙指南数字 : 移民.md
解决问题数字 : 难题. md

绩效文件

业绩指南数字 : 绩效 Guide.md - 优化建议和最佳做法
迁移数字 : 业绩模拟.md - 逐步移徙指南
业绩分析数字 : 业绩分析 - 技术深潜
优化摘要数字 : 被占领 - 快速概述

QQ 更改日志

见变动情况用于详细列出更改和版本历史.

版本与发布记录

@erpsquad/common 共发布 540 个版本，首次发布于 2025/11/06；过去 12 个月发布了 520 个版本。

版本	发布日期	距今
`1.11.28`latest	2026/11/12	1 天前
`1.11.27`	2026/11/06	7 天前
`1.0.1-ace-test`	2026/11/04	9 天前
`1.11.26`	2026/10/30	14 天前
`1.0.0-ace-test`	2026/10/29	15 天前
`1.11.25`	2026/10/29	15 天前

关于 @erpsquad/common 的常见问题

@erpsquad/common 是什么？

企业资源规划模块共享的UI组件库

如何安装 @erpsquad/common？

在项目目录运行 npm install @erpsquad/common，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：yup（^1.7.1）、sass（^1.69.5）、axios（^1.0.0）、dayjs（^1.11.10）、jspdf（^2.5.2）、react（^18.2.0 || ^19.0.0）、lodash（^4.17.21）、marked（^12.0.0）、i18next（^23.7.11）、@mui/lab（^5.0.0-alpha.165）、notistack（^3.0.1）、papaparse（^5.4.1）、react-dom（^18.2.0 || ^19.0.0）、file-saver（^2.0.5）、react-redux（^8.1.0 || ^9.0.0）、react-to-pdf（^1.0.1）、@mui/material（^5.15.0）、react-i18next（^13.5.0）、@emotion/react（^11.0.0）、@emotion/styled（^11.0.0）、react-hook-form（^7.58.1）、react-hot-toast（^2.4.1）、@reduxjs/toolkit（^1.9.0 || ^2.0.0）、react-date-range（^2.0.1）、react-doc-viewer（^0.1.14）、react-router-dom（^6.21.0）、libphonenumber-js（^1.11.11）、react-file-viewer（^1.2.1）、react-grid-layout（^1.4.4）、react-helmet-async（^2.0.4）、@hookform/resolvers（^3.10.0）、@mui/icons-material（^5.15.0）、@mui/x-date-pickers（^6.19.3）、i18next-http-backend（^2.4.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@erpsquad/common 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@erpsquad/common 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@erpsquad/common 可以商用吗？

@erpsquad/common 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@erpsquad/common 的下载量有多少？

根据 npm 官方下载统计，@erpsquad/common 在 2026/10/14 – 2026/11/12 这 30 天内被下载 36,968 次，日均约 1,232 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@erpsquad/common 还在维护吗？

最新版本 1.11.28 发布于 2026/11/12（1 天前）；至今共发布 540 个版本，其中过去 12 个月发布了 520 个；首次发布于 2025/11/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @erpsquad/common

pnpmpnpm add @erpsquad/common
yarnyarn add @erpsquad/common
bunbun add @erpsquad/common

peer 依赖d3 ^7.8.5可选yup ^1.7.1sass ^1.69.5uuid ^11.1.0可选axios ^1.0.0dayjs ^1.11.10jspdf ^2.5.2react ^18.2.0 || ^19.0.0lodash ^4.17.21marked ^12.0.0moment ^2.30.1可选i18next ^23.7.11@mui/lab ^5.0.0-alpha.165recharts ^3.8.1可选ckeditor5 ^47.6.1可选notistack ^3.0.1papaparse ^5.4.1react-dnd ^16.0.1可选react-dom ^18.2.0 || ^19.0.0@tiptap/pm ^3.20.4可选file-saver ^2.0.5pdfjs-dist ^3.11.174可选html2canvas ^1.4.1可选react-redux ^8.1.0 || ^9.0.0lucide-react ^0.507.0可选react-select ^5.7.0可选react-to-pdf ^1.0.1@dnd-kit/core ^6.3.1可选@mui/material ^5.15.0@tiptap/react ^3.20.4可选react-i18next ^13.5.0@emotion/react ^11.0.0react-dropzone ^14.2.3可选@emotion/styled ^11.0.0moment-timezone ^0.5.47可选react-hook-form ^7.58.1react-hot-toast ^2.4.1@reduxjs/toolkit ^1.9.0 || ^2.0.0gantt-task-react ^0.3.9可选react-date-range ^2.0.1react-datepicker ^6.1.0可选react-doc-viewer ^0.1.14react-router-dom ^6.21.0socket.io-client ^4.8.1可选@dnd-kit/sortable ^10.0.0可选libphonenumber-js ^1.11.11react-file-viewer ^1.2.1react-grid-layout ^1.4.4@fullcalendar/core ^6.1.10可选@fullcalendar/list ^6.1.10可选react-flags-select ^2.2.3可选react-helmet-async ^2.0.4react-querybuilder ^6.5.5可选@fullcalendar/react ^6.1.10可选@hookform/resolvers ^3.10.0@mui/icons-material ^5.15.0@mui/x-date-pickers ^6.19.3@tiptap/starter-kit ^3.20.4可选react-phone-input-2 ^2.15.1可选i18next-http-backend ^2.4.2material-react-table ^2.13.1可选@fullcalendar/daygrid ^6.1.10可选@asseinfo/react-kanban ^2.2.0可选@fullcalendar/resource ^6.1.10可选@fullcalendar/timegrid ^6.1.10可选@fullcalendar/timeline ^6.1.10可选@react-pdf-viewer/core ^3.12.0可选@tiptap/extension-link ^3.20.4可选@tiptap/extension-color ^3.20.4可选@tiptap/extension-image ^3.20.4可选@tiptap/extension-table ^3.20.4可选react-dnd-html5-backend ^16.0.1可选@ckeditor/ckeditor5-react ^11.0.1可选@fullcalendar/interaction ^6.1.10可选@glideapps/glide-data-grid ^5.3.2可选@tiptap/extension-highlight ^3.20.4可选@tiptap/extension-subscript ^3.20.4可选@tiptap/extension-table-row ^3.20.4可选@tiptap/extension-underline ^3.20.4可选@react-querybuilder/material ^6.5.5可选@tiptap/extension-table-cell ^3.20.4可选@tiptap/extension-text-align ^3.20.4可选@tiptap/extension-text-style ^3.20.4可选@tiptap/extension-font-family ^3.20.4可选@tiptap/extension-placeholder ^3.20.4可选@tiptap/extension-superscript ^3.20.4可选@tiptap/extension-table-header ^3.20.4可选@fullcalendar/resource-timegrid ^6.1.10可选@fullcalendar/resource-timeline ^6.1.10可选@glideapps/glide-data-grid-cells ^5.3.2可选@react-pdf-viewer/default-layout ^3.12.0可选@tiptap/extension-code-block-lowlight ^3.20.4可选

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

36,968

约 3.7万次日均 1,232 次

统计周期 2026/10/14 – 2026/11/12
数据来自 npm 官方下载统计，今天更新

最新版本1.11.28发布于 1 天前

开源许可MIT宽松许可

包体积47.8 MB5,899 个文件 · 解压后

运行依赖3 个另有 92 个 peer 依赖

模块格式ESM + CJS无副作用，可 tree-shake

TypeScript自带类型

发布版本540 个近 12 个月 520 个

首次发布2025/11/061 年前

元数据更新2026/11/12

每一个软件包背后，
都有分享与创造的人。

@erpsquad/common

@ erpsquad/ 常见

* 特性

& 深度导入

深度导入( 建议)

业绩效益

快速启动深导入

发展环境

生产部署

* 安装

同伴依赖关系

所需(核心功能)

可选( 特有)

完成安装( 所有特性)

QQ 快速启动

QQ 重要: 导入样式

业绩最佳做法

核心用法(最小依赖)

可用核心导出

完全使用( 有同行依赖)

带有自定义主题

QQ 主题系统

主题配置

自定义主题对象

可用颜色

& SCSS 样式

导入编译的 CSS( 建议)

使用工具类

使用SCSS变量(高级)

使用 SCSS Mixins (高级)

导入全部 SCSS 特性

模块导入系统

API 客户端

组件

窗体控件

数据显示

导航

反馈

QQ Redux 整合

与 Redux( 为复杂的应用程序推荐)

没有Redux( 简易应用程序)

可用的 Redux 切片

钩子

自定义钩

Redux 集成钩

水电费

公共事业

国际化

语言提供者

使用翻译

测试

API 参考

ERPUIProvider 推进器

组件道具

发展

图书馆的建设

运行测试

软件包验证

++ Bundle 分析

* 解决问题

共同问题

** 组件没有样式

导入出错

同伴依赖性警告

类型脚本出错

构建问题

获取帮助

捐款

发展指导方针

许可证

++ 辅助

绩效文件

QQ 更改日志

版本与发布记录

关于 @erpsquad/common 的常见问题

@erpsquad/common 是什么？

如何安装 @erpsquad/common？

@erpsquad/common 支持 TypeScript 吗？

@erpsquad/common 支持 ESM 还是 CommonJS？

@erpsquad/common 可以商用吗？