# ReactComponentsObject

**Repository Path**: nigutou/react-components-object

## Basic Information

- **Project Name**: ReactComponentsObject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-09
- **Last Updated**: 2025-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Component Library 🎨

企业级 React 组件库 - 基于 React 19 + TypeScript + Ant Design + Tailwind CSS 4

## ✨ 特性

- 🚀 **React 19** - 最新的 React 版本，支持 React Compiler
- 💪 **TypeScript** - 完整的类型定义，提供最佳开发体验
- 🎨 **Ant Design 5** - 企业级 UI 设计语言
- 🌈 **Tailwind CSS 4** - 现代化的 CSS 框架，更快更强
- ⚡ **Vite** - 极速的开发体验
- 🔥 **热更新** - 开发时支持快速热更新
- 📦 **按需加载** - 支持 Tree-shaking
- 🧪 **单元测试** - Vitest + Testing Library
- 📝 **代码规范** - ESLint + Prettier + Husky
- 🎯 **类型安全** - 严格的 TypeScript 配置
- ⚡ **高性能** - 深度优化，输入流畅无卡顿

## 📦 核心组件

| 组件              | 描述         | 状态      |
| ----------------- | ------------ | --------- |
| **Button**        | 按钮组件     | ✅ 已完成 |
| **DynamicForm**   | 动态表单组件 | ✅ 已完成 |
| **UnifiedForm**   | 统一表单入口 | ✅ 已完成 |
| **StepsForm**     | 分步表单     | ✅ 已完成 |
| **CollapseForm**  | 折叠面板表单 | ✅ 已完成 |
| **TabsForm**      | 标签页表单   | ✅ 已完成 |
| **DynamicTable**  | 动态表格组件 | 🚧 开发中 |
| **DialogManager** | 弹窗管理器   | 🚧 开发中 |
| **ContextMenu**   | 右键菜单     | 🚧 开发中 |
| **TreeContainer** | 树形容器     | 🚧 开发中 |
| **SelectTree**    | 树形选择器   | 🚧 开发中 |
| **TransferTree**  | 穿梭树       | 🚧 开发中 |
| **TimeLine**      | 时间线       | 🚧 开发中 |
| **ERDiagram**     | ER关系图     | 🚧 开发中 |

### DynamicForm 特性

- 🎯 **20+ 字段类型** - 覆盖所有常见表单场景
- 🔄 **智能联动** - 条件显示、条件禁用、计算字段
- 🌐 **异步选项** - 支持异步加载和省市联动
- 🎛️ **4种布局** - 水平、垂直、行内、栅格布局
- ✅ **完整验证** - 集成 Ant Design Form 验证系统
- 🚶 **分步表单** - 引导式填写，进度可视化
- 📁 **折叠面板** - 节省空间的分组展示
- 📑 **标签页表单** - 独立模块化展示
- 🎯 **动态数组** - 添加/删除/拖拽排序
- 📦 **嵌套对象** - 支持多层嵌套表单
- ⚡ **极致性能** - 深度优化，大型表单流畅如丝

### 🚀 性能优化

#### 输入性能优化（2025-01-25）

经过深度性能优化，表单输入体验达到生产级别：

| 指标     | 优化前      | 优化后  | 提升        |
| -------- | ----------- | ------- | ----------- |
| 输入延迟 | 200-500ms   | 10-30ms | **-90%** ⚡ |
| CPU 占用 | 90%+        | 20-30%  | **-70%** ⚡ |
| 渲染次数 | 30 字段全部 | 1 字段  | **-96%** ⚡ |

**关键优化技术**:

- ✅ 引用稳定性优化 - 避免不必要的重渲染
- ✅ 智能依赖追踪 - 只更新真正需要的字段
- ✅ Map 数据结构 - O(1) 查找替代 O(n)
- ✅ 精确 memo 比较 - 减少 85%+ 无效渲染

详见 [CHANGELOG.md](./CHANGELOG.md) 查看完整优化细节。

## 🚀 快速开始

### 安装依赖

```bash
# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm (推荐)
pnpm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000 查看组件展示。

### 构建生产版本

```bash
# 构建应用
npm run build

# 构建组件库
npm run build:lib
```

### 运行测试

```bash
# 运行测试
npm run test

# 测试覆盖率
npm run test:coverage

# 测试 UI
npm run test:ui
```

### 代码检查

```bash
# ESLint 检查
npm run lint

# ESLint 自动修复
npm run lint:fix

# Prettier 格式化
npm run format

# TypeScript 类型检查
npm run type-check
```

## 📖 使用示例

### Button 组件

```tsx
import { Button } from 'react-component-library'

function App() {
  return (
    <div>
      <Button type="primary" size="middle">
        点击按钮
      </Button>
    </div>
  )
}
```

## 📁 项目结构

```
reactTemplate/
├── src/
│   ├── components/          # 组件目录
│   │   ├── Button/          # Button 组件
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── index.ts
│   │   └── index.ts         # 组件统一导出
│   ├── types/               # 类型定义
│   │   └── index.ts
│   ├── utils/               # 工具函数
│   │   └── index.ts
│   ├── styles/              # 样式文件
│   │   ├── index.css
│   │   └── variables.scss
│   ├── test/                # 测试配置
│   │   └── setup.ts
│   ├── App.tsx              # 应用主组件
│   ├── main.tsx             # 应用入口
│   ├── index.ts             # 组件库入口
│   └── vite-env.d.ts
├── architecture/            # 架构文档
├── .husky/                  # Git hooks
├── package.json
├── tsconfig.json
├── vite.config.ts
├── vitest.config.ts
├── tailwind.config.js
├── postcss.config.js
├── .eslintrc.cjs
├── .prettierrc.json
├── commitlint.config.cjs
└── README.md
```

## 🛠️ 技术栈

### 核心技术

- **React** 18.2.0 - UI 框架
- **TypeScript** 5.3.3 - 类型系统
- **Vite** 5.0.11 - 构建工具
- **Ant Design** 5.12.8 - UI 组件库
- **Tailwind CSS** 4.0.0-alpha.25 - CSS 框架（新引擎 Oxide，性能提升 3-5 倍）

### 状态管理

- **Zustand** 4.4.7 - 轻量级状态管理

### 开发工具

- **ESLint** - 代码检查
- **Prettier** - 代码格式化
- **Husky** - Git hooks
- **Commitlint** - 提交信息规范
- **Vitest** - 单元测试
- **Testing Library** - React 组件测试

## 🤝 开发规范

### Git 提交规范

```bash
feat: 新增功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关
```

### 代码风格

- 使用 2 空格缩进
- 使用单引号
- 不使用分号
- 最大行宽 100 字符
- 使用 Prettier 自动格式化

### 组件开发规范

1. 使用 TypeScript 编写
2. 提供完整的类型定义
3. 编写单元测试
4. 添加 JSDoc 注释
5. 遵循 React Hooks 最佳实践

## 📚 文档结构

### 核心文档

- 📖 **[README.md](./README.md)** - 项目主文档
- 📋 **[DynamicForm README](./src/components/DynamicForm/README.md)** - 组件使用文档
- 🔧 **[API 参考](./src/components/DynamicForm/API_REFERENCE.md)** - 完整 API 文档
- 📝 **[更新日志](./src/components/DynamicForm/CHANGELOG.md)** - 版本更新记录
- 🚀 **[快速开始](./src/components/DynamicForm/QUICK_START.md)** - 入门指南

### 专题文档

- 🐛 **[问题排查](./docs/TROUBLESHOOTING.md)** - 常见问题和解决方案
- 🛠️ **[工具使用](./docs/UTILS_USAGE.md)** - 工具函数使用指南
- 🎨 **[Tailwind 迁移](./docs/TAILWIND_4_MIGRATION.md)** - Tailwind 4.0 升级指南
- 🔌 **[Router 配置](./docs/ROUTER_V7_CONFIG.md)** - React Router v7 配置

### 示例代码

访问 http://localhost:3000 查看在线演示：

- 🎯 **综合演示** - `/examples/dynamic-form-full`
  - 所有字段类型
  - 布局系统
  - 动态特征引擎
  - 异步选项联动
  - 验证系统
  - 分步表单
  - 折叠面板表单
  - 标签页表单
  - 动态数组/嵌套对象
- 🧠 **DynamicFormEngine 行为验证** - `/examples/dynamic-form-engine`
  - 使用 `UnifiedFormEngine` 的新引擎实现
  - 覆盖显隐/禁用、计算字段链、隐藏字段清理等核心行为
  - 内置「校验系统」Tab：基础校验、数组字段校验、跨字段（确认密码）校验
  - 内置「全字段 Tabs 测试」页：按分组验证所有字段类型是否在 Engine 下工作正常

## 📄 许可证

MIT License

## 👥 贡献者

欢迎贡献代码！请阅读 [贡献指南](./CONTRIBUTING.md)。

## 📮 联系方式

- GitHub: [your-repo](https://github.com/your-repo)
- 问题反馈: [Issues](https://github.com/your-repo/issues)

---

**Made with ❤️ by Your Team**