tangweijie
e0a6ba2dc4
- Vite + React 18 + TypeScript - TailwindCSS 暗色主题 - 仪表板、分析、事件浏览页面 - Recharts 图表组件 - Zustand 状态管理 - TanStack Query 数据请求
114 lines
2.2 KiB
Markdown
114 lines
2.2 KiB
Markdown
# Collector Dashboard
|
||
|
||
数据分析看板 - React + TypeScript + Vite
|
||
|
||
## 项目介绍
|
||
|
||
Collector Dashboard 是 IDE 数据采集系统的可视化前端，提供数据分析、事件浏览和配置管理等功能。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: React 18
|
||
- **语言**: TypeScript
|
||
- **构建工具**: Vite
|
||
- **样式**: TailwindCSS
|
||
- **状态管理**: Zustand
|
||
- **数据请求**: TanStack Query
|
||
- **图表**: Recharts
|
||
- **路由**: React Router
|
||
|
||
## 功能特性
|
||
|
||
- 📊 数据概览仪表板
|
||
- 📈 采纳率趋势分析
|
||
- 📋 事件浏览和搜索
|
||
- ⚙️ 配置管理界面
|
||
- 🌙 暗色主题设计
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 18
|
||
- pnpm >= 8
|
||
|
||
### 安装
|
||
|
||
```bash
|
||
# 安装依赖
|
||
pnpm install
|
||
|
||
# 启动开发服务器
|
||
pnpm dev
|
||
|
||
# 构建生产版本
|
||
pnpm build
|
||
```
|
||
|
||
### 开发
|
||
|
||
```bash
|
||
# 启动开发服务器（端口 5173）
|
||
pnpm dev
|
||
|
||
# 代码检查
|
||
pnpm lint
|
||
|
||
# 预览生产构建
|
||
pnpm preview
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
collector-dashboard/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ ├── layout/ # 布局组件
|
||
│ │ ├── charts/ # 图表组件
|
||
│ │ └── common/ # 通用组件
|
||
│ ├── pages/
|
||
│ │ ├── Dashboard/ # 仪表板页面
|
||
│ │ ├── Analytics/ # 分析页面
|
||
│ │ ├── Events/ # 事件页面
|
||
│ │ └── Settings/ # 设置页面
|
||
│ ├── hooks/ # 自定义 Hooks
|
||
│ ├── services/ # API 服务
|
||
│ ├── stores/ # 状态管理
|
||
│ ├── types/ # 类型定义
|
||
│ ├── lib/ # 工具函数
|
||
│ ├── App.tsx
|
||
│ └── main.tsx
|
||
├── public/
|
||
├── index.html
|
||
├── package.json
|
||
├── tailwind.config.js
|
||
├── vite.config.ts
|
||
└── tsconfig.json
|
||
```
|
||
|
||
## API 代理
|
||
|
||
开发模式下，API 请求会代理到 `http://localhost:8000`：
|
||
|
||
```typescript
|
||
// vite.config.ts
|
||
server: {
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8000',
|
||
changeOrigin: true,
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
## 相关仓库
|
||
|
||
- [ide-data-collector](../ide-data-collector) - IDE插件 Monorepo
|
||
- [collector-backend](../collector-backend) - 数据采集后端
|
||
|
||
## 许可证
|
||
|
||
MIT License
|