# 大屏展示

**Repository Path**: 1160/large-screen-display

## Basic Information

- **Project Name**: 大屏展示
- **Description**: 用于大屏展示
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-07
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大屏数据展示系统

基于 React + Vite 构建的现代化大屏数据展示系统，集成了 Ant Design、ECharts、Axios 和 Zustand 等主流技术栈。

## 技术栈

- **React 18** - 前端框架
- **Vite** - 构建工具
- **Ant Design** - UI 组件库
- **ECharts** - 数据可视化图表库
- **Axios** - HTTP 请求库
- **Zustand** - 轻量级状态管理

## 功能特性

- 📊 多种图表类型支持（柱状图、折线图、饼图）
- 🎨 响应式设计，支持移动端
- 🌙 明暗主题切换
- 📡 HTTP 请求拦截和错误处理
- 🔄 实时数据刷新
- 📱 侧边栏折叠功能
- 💾 全局状态管理

## 项目结构

```
large-screen-display/
├── public/
├── src/
│   ├── components/          # 组件目录
│   │   └── Chart/          # 图表组件
│   ├── store/              # 状态管理
│   ├── utils/              # 工具函数
│   │   └── request.js      # Axios 配置
│   ├── App.jsx             # 主应用组件
│   ├── App.css             # 应用样式
│   ├── main.jsx            # 应用入口
│   └── index.css           # 全局样式
├── index.html              # HTML 模板
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
└── .eslintrc.cjs           # ESLint 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 主要组件说明

### App.jsx
主应用组件，包含：
- 侧边栏导航
- 头部信息栏
- 数据概览卡片
- 图表展示区域

### Chart 组件
基于 ECharts 的图表组件，支持：
- 柱状图 (bar)
- 折线图 (line) 
- 饼图 (pie)

### Zustand Store
全局状态管理，包含：
- 用户信息
- 主题设置
- 加载状态
- 图表数据

### Axios 配置
 HTTP 请求配置，包含：
- 请求/响应拦截器
- 错误处理
- Token 自动添加

## 开发说明

1. 所有组件都使用函数式组件和 Hooks
2. 使用 Zustand 进行状态管理，避免 Redux 的复杂性
3. Axios 已配置好拦截器，可直接使用
4. ECharts 通过 echarts-for-react 集成
5. 支持 ESLint 代码检查

## 自定义配置

### 修改 API 地址
在 `src/utils/request.js` 中修改 `baseURL`

### 添加新的图表类型
在 `src/components/Chart/index.jsx` 中添加新的图表配置

### 扩展状态管理
在 `src/store/index.js` 中添加新的状态和方法

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## License

MIT License