提交

2026-02-12 09:38:27 +08:00
commit 5ba8456a88
42 changed files with 8372 additions and 0 deletions
@@ -0,0 +1,149 @@
+# 数据大屏 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 |
+| 学习曲线 | 中等 | 较低 |
+| 生态成熟度 | 非常成熟 | 快速发展 |