# haob-design_react

**Repository Path**: xier123456/haob-design_react

## Basic Information

- **Project Name**: haob-design_react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-07
- **Last Updated**: 2025-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

          
# haob-design_react 组件库文档

## 📚 项目简介

**haob-design_react** 是一款基于 React 19 和 Next.js 15 构建的现代化 UI 组件库，专为高效开发和灵活定制而设计。它结合了 Tailwind CSS 的强大样式系统和 shadcn UI 的组件理念，提供了一套精美、可访问且高度可定制的 UI 组件。

## ✨ 核心特性

- **🚀 基于最新技术栈**：使用 React 19、Next.js 15 和 Tailwind CSS 4 构建
- **🔧 完全可定制**：组件代码透明，可直接修改以满足特定需求
- **🎨 精美的设计**：采用现代设计语言，提供一致的视觉体验
- **📱 响应式设计**：所有组件均支持响应式布局
- **💡 丰富的动画效果**：集成 framer-motion、GSAP 等动画库，提供流畅的交互体验
- **🧩 类型安全**：完整的 TypeScript 类型支持，避免运行时错误
- **⚡ 高性能**：组件经过优化，确保渲染性能

## 🚀 快速开始


## 🛠️ 技术栈

| 技术/库 | 版本 | 用途 |
|---------|------|------|
| React | 19.1.0 | 前端 UI 库 |
| Next.js | 15.5.4 | React 框架 |
| TypeScript | ^5 | 类型系统 |
| Tailwind CSS | ^4 | 实用优先的 CSS 框架 |
| Radix UI | 多个包 | 基础 UI 组件原语 |
| framer-motion | ^12.23.22 | 动画库 |
| GSAP | ^3.13.0 | 高级动画库 |
| lucide-react | ^0.544.0 | 图标库 |
| class-variance-authority | ^0.7.1 | 处理组件变体 |
| tailwind-merge | ^3.3.1 | 合并 Tailwind 类 |

## 📁 项目结构

```
├── .gitignore
├── README.md
├── components.json     # shadcn UI 配置
├── next.config.ts      # Next.js 配置
├── package.json        # 项目依赖
├── postcss.config.mjs  # PostCSS 配置
├── public/             # 静态资源
├── src/                # 源代码目录
│   ├── app/            # Next.js App Router
│   │   ├── components/ # 组件文档页面
│   │   ├── dashboard/  # 仪表盘页面
│   │   ├── development-history/ # 开发历程页面
│   │   ├── installation/ # 安装指南页面
│   │   ├── introduction/ # 项目介绍页面
│   │   ├── layout.tsx  # 全局布局
│   │   └── page.tsx    # 首页
│   ├── components/     # 组件库源码
│   │   ├── features/   # 特性组件
│   │   ├── layout/     # 布局组件
│   │   └── ui/         # 基础 UI 组件
│   ├── hooks/          # 自定义钩子
│   └── lib/            # 工具函数
└── tsconfig.json       # TypeScript 配置
```

## 📦 组件库配置

项目使用 shadcn UI 的配置方式，配置文件位于 `components.json`：

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
```

## 🔍 组件列表

haob-design_react 提供了丰富的 UI 组件，以下是主要组件列表：

### 基础组件
- **Button**: 按钮组件，支持多种变体和尺寸
- **Input**: 输入框组件，支持表单验证
- **Card**: 卡片组件，用于展示相关信息
- **DropdownMenu**: 下拉菜单组件
- **Table**: 表格组件，用于展示数据

### 布局组件
- **Sidebar**: 侧边栏组件，用于导航
- **Header**: 头部组件

### 特性组件
- **CodeBlock**: 代码块组件，用于展示代码
- **AppSidebar**: 应用侧边栏组件

## 📖 使用指南

### 导入组件

```tsx
// 从 @/components/ui 导入基础 UI 组件
import { Button } from '@/components/ui/button';

// 从 @/app/components 导入特定组件
import { Card } from '@/app/components/card/Card';
```

### 基本使用示例

```tsx
import React from 'react';
import { Button } from '@/components/ui/button';

function MyComponent() {
  return (
    <div>
      <Button variant="primary" size="md">
        点击我
      </Button>
    </div>
  );
}
```

### 自定义组件

haob-design_react 的一个主要特点是组件代码完全透明，您可以直接修改组件的源代码来自定义组件：

1. 找到组件的源代码文件（通常位于 `src/app/components/` 或 `src/components/ui/` 目录下）
2. 根据您的需求修改代码
3. 保存更改，Next.js 会自动重新加载并应用更改

## 🎨 主题定制

haob-design_react 使用 Tailwind CSS 变量系统实现主题定制。您可以在 `src/app/globals.css` 文件中修改主题变量：

```css
:root {
  /* 主要颜色 */
  --primary: 220 90% 50%;
  --primary-foreground: 0 0% 100%;
  
  /* 中性色 */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  
  /* 边框和分隔线 */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
}
```


## 🔮 未来规划

haob-design_react 组件库正在持续发展中，未来计划实现以下功能：

1. **更多组件类型**：持续增加实用的 UI 组件
2. **主题定制系统**：开发更强大的主题定制功能
3. **TypeScript 类型增强**：完善组件的类型定义
4. **React Native 支持**：扩展到移动端平台
5. **社区建设**：鼓励开发者贡献代码和分享经验

## 🤝 贡献指南

欢迎并感谢所有的贡献！如果您想为 haob-design_react 做出贡献，请按照以下步骤操作：

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


感谢您使用 haob-design_react 组件库！希望这个组件库能够帮助您更高效地开发出优秀的应用程序。