# 数据大屏 React 项目

这是使用 React 18 + Vite 重构的数据大屏项目，功能与原HTML版本完全一致。

## 项目结构

```
react-app/
├── src/
│   ├── components/
│   │   ├── TopData.jsx         # 顶部数据区域（年度目标、销售额、进度条、季度进度）
│   │   ├── GroupRanking.jsx    # 小组排名组件
│   │   └── PersonRanking.jsx   # 个人排名组件
│   ├── App.jsx                # 主应用组件
│   ├── main.jsx               # 入口文件
│   └── style.css              # 全局样式
├── public/
│   └── img/                   # 图片资源
├── index.html                 # HTML模板
├── package.json              # 项目配置
└── vite.config.js            # Vite配置
```

## 安装步骤

### 1. 安装依赖

```bash
cd react-app
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

浏览器会自动打开 `http://localhost:3001`

### 3. 构建生产版本

```bash
npm run build
```

构建产物在 `react-app/dist/` 目录

## 功能特性

✅ **响应式设计**
- PC端自动等比例缩放
- 移动端自适应布局
- 支持4K屏幕、普通PC、移动端

✅ **数据展示**
- 年度目标和销售额动态加载
- 进度条动画效果
- 季度周数进度显示

✅ **图表功能**
- 小组排名柱状图
- 个人排名柱状图（移动端横向布局）
- ECharts响应式图表

✅ **性能优化**
- React Hooks (useState, useEffect, useRef)
- 组件化开发
- 防抖处理窗口resize
- 图表自动销毁重建

## 技术栈

- React 18.2+ (Hooks)
- Vite 5.0+
- ECharts 5.4+
- JavaScript ES6+

## 对接真实API

在 `src/components/TopData.jsx` 的 `fetchYearData` 函数中修改：

```javascript
const fetchYearData = async () => {
  try {
    const response = await fetch('/api/year-data')
    const data = await response.json()
    return data
  } catch (error) {
    console.error('获取数据失败:', error)
    return { target: 0, actual: 0 }
  }
}
```

## 数据格式

### API返回格式

```json
{
  "target": 3500,
  "actual": 2750
}
```

### 排名数据格式

在 `GroupRanking.jsx` 和 `PersonRanking.jsx` 中修改数据：

```javascript
const groupData = [
  { name: '名称', target: 目标值, actual: 实际值 }
]
```

## React Hooks 使用

- **useState**: 组件状态管理
- **useEffect**: 副作用处理（图表初始化、事件监听）
- **useRef**: DOM引用和图表实例存储
- **useCallback**: 性能优化（可选）

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 注意事项

1. 确保 `public/img/` 目录包含所有图片资源
2. PC端缩放范围为 0.6-1.0（缩小不放大）
3. 移动端断点为 768px
4. 图表使用防抖处理resize事件（300ms延迟）
5. React组件使用函数式组件 + Hooks

## 与Vue版本对比

| 特性 | React版本 | Vue版本 |
|------|-----------|---------|
| 状态管理 | useState | ref/reactive |
| 副作用 | useEffect | onMounted/onUnmounted |
| DOM引用 | useRef | ref |
| 组件定义 | 函数式组件 | setup script |
| 样式处理 | CSS Modules/全局CSS | scoped CSS |
| 学习曲线 | 中等 | 较低 |
| 生态成熟度 | 非常成熟 | 快速发展 |