Yuanzai Component Library

基于 React + Ant Design + TypeScript 的公共组件库

特性

• 🎨 基于 Ant Design 设计语言
• 📦 开箱即用的高质量 React 组件
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件
• 🎭 支持主题定制
• 📚 详细的文档和示例
• 🔧 支持按需加载
• 🚀 提供在线组件展示页面
• 📐 严格遵循设计规范，确保视觉一致性

组件展示页面

我们提供了专业的组件展示页面，类似 Ant Design 官方文档的风格：

# 启动组件展示页面
npm run dev

展示页面功能：

• 📦 按分类展示所有组件
• 🎨 实时预览组件效果
• 📋 一键复制示例代码
• 🔍 支持组件搜索
• 📱 响应式布局设计
• 🎯 专业的文档风格

💡 如果遇到问题，请查看 故障排除指南

安装

npm install yuanzai-component-library
# 或
yarn add yuanzai-component-library
# 或
pnpm add yuanzai-component-library

使用

import React from 'react';
import { YuanzaiButton } from 'yuanzai-component-library';

const App: React.FC = () => {
  return (
    <div>
      <YuanzaiButton variant="primary">主要按钮</YuanzaiButton>
      <YuanzaiButton variant="secondary">次要按钮</YuanzaiButton>
      <YuanzaiButton variant="success">成功按钮</YuanzaiButton>
      <YuanzaiButton variant="warning">警告按钮</YuanzaiButton>
      <YuanzaiButton variant="danger">危险按钮</YuanzaiButton>
    </div>
  );
};

export default App;

设计规范

本组件库严格遵循统一的设计规范，确保所有组件在视觉和交互上保持一致性：

• 字体规范：思源黑体，支持 14px/16px/18px/20px 标准字号
• 尺寸规范：标准化的高度和边距（32px/40px/54px/60px）
• 颜色规范：基于主题色的完整色彩系统
• 响应式设计：适配桌面端、平板端、移动端

查看完整设计规范：DESIGN_SPECIFICATION.md

# 检查组件是否符合设计规范
npm run design:check

组件列表

通用组件

• YuanzaiButton - 扩展按钮组件，支持多种变体样式

布局组件

• TitleWithBg - 带背景的标题组件

导航组件

• CollapseButton - 侧边栏折叠按钮

数据录入

• YuanzaiInput - 符合设计规范的输入框组件

数据展示

• CustomTable - 支持深色/浅色主题的自定义表格
• CustomPagination - 支持深色/浅色主题的自定义分页

反馈组件

• YuanzaiModal - 符合设计规范的弹窗组件

YuanzaiButton

扩展了 Ant Design Button 组件的功能按钮。

Props

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | variant | 按钮变体类型 | 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' | 'primary' | | round | 是否为圆形按钮 | boolean | false | | className | 自定义类名 | string | - |

继承 Ant Design Button 的所有其他属性。

开发

# 安装依赖
npm install

# 启动组件展示页面（主要开发页面）
npm run dev

# 构建组件库
npm run build

# 构建演示页面
npm run build:demo

# 检查设计规范符合性
npm run design:check

# 类型检查
npm run type-check

# 发布前检查
npm run publish:check

# 发布到npm
npm run publish:npm

版本管理

# 自动更新补丁版本 (1.0.0 -> 1.0.1)
npm run version:patch

# 自动更新次版本 (1.0.0 -> 1.1.0)
npm run version:minor

# 自动更新主版本 (1.0.0 -> 2.0.0)
npm run version:major

发布流程

1. 开发完成后运行检查：

   npm run publish:check

2. 执行发布脚本：

   npm run publish:npm

3. 发布脚本会自动执行以下步骤：

   • 检查Git状态
   • 运行类型检查
   • 清理并重新构建
   • 版本管理（可选择patch/minor/major或自定义）
   • 预览包内容
   • 确认后发布到npm
   • 创建Git标签

主题定制

组件库使用 Less 变量系统，你可以通过修改 Less 变量来定制主题：

// 在你的项目中覆盖变量
@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;

贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

开发规范

• 使用 TypeScript 编写代码
• 遵循 ESLint 规则
• 为新组件编写文档和示例
• 确保所有测试通过

更新日志

v1.0.0 (2024-01-01)

• 🎉 初始版本发布
• ✨ 添加 YuanzaiButton 组件
• 📚 完善文档和示例
• 🔧 配置构建和发布流程

许可证

MIT