# 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