# react-dashboard-template

**Repository Path**: more_cat/react-dashboard-template

## Basic Information

- **Project Name**: react-dashboard-template
- **Description**: 基于React框架的大屏项目模版
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 大屏前端项目模板

基于 React 19、TypeScript、Less、UnoCSS 构建的数据可视化大屏项目模板。

## 特性

- 🚀 **React 19** - 使用最新版本的 React
- 💎 **TypeScript** - 完整的类型支持
- 🎨 **Less + UnoCSS** - 双样式方案,灵活高效
- 📦 **Vite** - 极速的开发体验
- 📊 **ECharts** - 强大的图表库
- 🔄 **Zustand + TanStack Query** - 现代化状态管理
- 📱 **响应式设计** - 支持多种设备适配
- 🎯 **代码规范** - ESLint + Prettier + Husky

## 技术栈

| 技术           | 版本 | 说明         |
| -------------- | ---- | ------------ |
| React          | 19.x | 前端框架     |
| TypeScript     | 6.x  | 类型系统     |
| Vite           | 8.x  | 构建工具     |
| Less           | 4.x  | CSS 预处理器 |
| UnoCSS         | 66.x | 原子化 CSS   |
| ECharts        | 6.x  | 图表库       |
| Zustand        | 5.x  | 状态管理     |
| TanStack Query | 5.x  | 数据请求     |
| Axios          | 1.x  | HTTP 客户端  |

## 项目结构

```
src/
├── assets/          # 静态资源
├── components/      # 组件库
│   ├── border/      # 边框组件
│   ├── chart/       # 图表组件
│   ├── data-display/# 数据展示组件
│   └── common/      # 通用组件
├── hooks/           # 自定义 Hooks
├── layouts/         # 布局组件
├── pages/           # 页面
├── services/        # 服务层
│   ├── api/         # API 接口
│   ├── request/     # 请求封装
│   └── query/       # Query 配置
├── stores/          # 状态管理
├── styles/          # 样式文件
├── types/           # 类型定义
├── utils/           # 工具函数
├── mock/            # Mock 数据
└── config/          # 配置文件
```

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产版本

```bash
pnpm preview
```

## 可用脚本

| 脚本              | 说明             |
| ----------------- | ---------------- |
| `pnpm dev`        | 启动开发服务器   |
| `pnpm build`      | 构建生产版本     |
| `pnpm preview`    | 预览生产版本     |
| `pnpm lint`       | 代码检查         |
| `pnpm lint:fix`   | 自动修复代码问题 |
| `pnpm format`     | 格式化代码       |
| `pnpm type-check` | 类型检查         |

## 核心功能

### 1. 布局系统

- **ScaleContainer** - 等比例缩放容器,支持多种适配模式
- **栅格系统** - 24栅格响应式布局

### 2. 组件库

- **边框组件** - 10+种科技感边框样式
- **图表组件** - 柱状图、折线图、饼图等
- **数据展示** - 滚动列表、数字翻牌器、进度条等

### 3. 工具函数

- 格式化工具(日期、数字、货币等)
- 数学计算工具
- DOM操作工具
- 通用工具函数

### 4. 自定义 Hooks

- **useResize** - 监听元素尺寸变化
- **useTheme** - 主题管理
- **useChart** - ECharts封装

### 5. 主题系统

支持多种预设主题:

- dark-blue (科技蓝)
- dark-purple (暗紫)
- light (浅色)

## 设备适配

项目支持多种设备适配方案:

1. **等比例缩放** - 保持设计稿比例,自动缩放
2. **拉伸填充** - 拉伸填充整个视口
3. **滚动模式** - 内容可滚动

## 开发规范

### Git 提交规范

使用 Commitlint 规范提交信息:

- `feat`: 新功能
- `fix`: 修复问题
- `docs`: 文档变更
- `style`: 代码格式
- `refactor`: 代码重构
- `perf`: 性能优化
- `test`: 测试
- `build`: 构建
- `ci`: CI/CD
- `chore`: 其他修改

### 代码风格

- ESLint + Prettier 自动格式化
- TypeScript 严格模式
- Husky + lint-staged 提交前检查

## 浏览器支持

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

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request!