npm package: @orgbricks/hr-components
Description: Professional HR components library for React with TypeScript - 专业的人事组件库
Author: arloshld
Latest version: 0.1.3

# OrgBricks - 专业人事组件库

> 基于 React + TypeScript 的高质量人事场景组件库，专为企业级应用设计

[![NPM Version](https://img.shields.io/npm/v/@orgbricks/hr-components)](https://www.npmjs.com/package/@orgbricks/hr-components)
[![License](https://img.shields.io/npm/l/@orgbricks/hr-components)](https://github.com/yourusername/orgbricks/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)

## ✨ 特性

- 🎨 **现代设计** - 遵循最新设计规范，支持深色模式
- 📱 **响应式** - 完美适配各种屏幕尺寸
- 🔧 **TypeScript** - 完整的类型定义，提供优秀的开发体验
- 🎭 **可定制** - 灵活的主题系统和样式定制
- 📦 **轻量级** - 按需引入，优化包体积
- 🌍 **国际化** - 内置中英文支持，易于扩展
- ⚡ **高性能** - 优化渲染性能，支持大数据量

## 🚀 快速开始

### 安装

```bash
# npm
npm install @orgbricks/hr-components

# yarn
yarn add @orgbricks/hr-components

# pnpm
pnpm add @orgbricks/hr-components
```

### 基础使用

```tsx
import React from 'react';
import { EmployeeCard } from '@orgbricks/hr-components';
import '@orgbricks/hr-components/styles';

const employee = {
  id: '1',
  name: '张三',
  email: 'zhangsan@example.com',
  position: '高级前端开发工程师',
  department: '技术部',
  hireDate: '2022-03-15',
  status: 'active'
};

function App() {
  return (
    <EmployeeCard 
      employee={employee}
      onClick={(emp) => console.log('点击员工:', emp.name)}
    />
  );
}
```

## 📚 组件文档

### EmployeeCard - 员工卡片

用于展示员工基本信息的卡片组件。

#### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| employee | `Employee` | - | 员工信息对象 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 卡片尺寸 |
| showDetails | `boolean` | `true` | 是否显示详细信息 |
| onClick | `(employee: Employee) => void` | - | 点击事件回调 |
| actionButton | `ReactNode` | - | 自定义操作按钮 |

#### 员工数据类型

```typescript
interface Employee {
  id: string;
  name: string;
  email: string;
  phone?: string;
  avatar?: string;
  position: string;
  department: string;
  hireDate: string;
  status: 'active' | 'inactive' | 'on_leave';
  manager?: string;
  reportees?: string[];
}
```

#### 使用示例

```tsx
// 基础用法
<EmployeeCard employee={employee} />

// 小尺寸卡片
<EmployeeCard employee={employee} size="small" />

// 不显示详细信息
<EmployeeCard employee={employee} showDetails={false} />

// 带操作按钮
<EmployeeCard 
  employee={employee} 
  actionButton={<button>编辑</button>}
/>
```

## 🎨 主题定制

### CSS 变量

你可以通过CSS变量来定制组件样式：

```css
:root {
  --org-primary-color: #3b82f6;
  --org-success-color: #10b981;
  --org-warning-color: #f59e0b;
  --org-error-color: #ef4444;
  --org-border-radius: 8px;
  --org-spacing-sm: 8px;
  --org-spacing-md: 16px;
  --org-spacing-lg: 24px;
}
```

### 自定义样式

```css
/* 自定义员工卡片样式 */
.employee-card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.employee-card--clickable:hover {
  transform: scale(1.02);
}
```

## 🔧 开发

### 环境要求

- Node.js >= 16
- React >= 16.8.0
- TypeScript >= 4.5

### 本地开发

```bash
# 克隆项目
git clone https://github.com/yourusername/orgbricks.git
cd orgbricks

# 安装依赖
npm install

# 启动 Storybook
npm run storybook

# 运行测试
npm test

# 构建项目
npm run build
```

### 项目结构

```
src/
├── components/          # 组件目录
│   ├── EmployeeCard/   # 员工卡片组件
│   └── ...
├── types/              # 类型定义
├── hooks/              # 自定义 Hooks
├── utils/              # 工具函数
└── index.ts           # 主入口文件

stories/                # Storybook 故事
__tests__/             # 测试文件
```

## 🚀 路线图

### 即将推出的组件

- [ ] **OrgChart** - 组织架构图
- [ ] **LeaveCalendar** - 请假日历
- [ ] **PerformanceWidget** - 绩效展示组件
- [ ] **DepartmentTree** - 部门树形结构
- [ ] **EmployeeDirectory** - 员工通讯录
- [ ] **AttendanceTracker** - 考勤追踪器

### 计划功能

- [ ] 更多主题支持
- [ ] 移动端优化
- [ ] 无障碍访问增强
- [ ] 更多国际化语言
- [ ] 图表可视化组件

## 🤝 贡献

欢迎各种形式的贡献！

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

## 📝 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🔗 相关链接

- [在线文档](https://orgbricks.github.io)
- [Storybook 演示](https://orgbricks.github.io/storybook)
- [更新日志](https://github.com/yourusername/orgbricks/blob/main/CHANGELOG.md)
- [问题反馈](https://github.com/yourusername/orgbricks/issues)

## 💡 商业合作

如需企业级支持、定制开发或商业授权，请联系：

- 邮箱：business@orgbricks.com
- 微信：OrgBricks-Support

---

<p align="center">
  <sub>使用 ❤️ 构建，为人事管理而生</sub>
</p>