Collector Dashboard

数据分析看板 - React + TypeScript + Vite

项目介绍

Collector Dashboard 是 IDE 数据采集系统的可视化前端，提供数据分析、事件浏览和配置管理等功能。

技术栈

• 框架: React 18
• 语言: TypeScript
• 构建工具: Vite
• 样式: TailwindCSS
• 状态管理: Zustand
• 数据请求: TanStack Query
• 图表: Recharts
• 路由: React Router

功能特性

• 📊 数据概览仪表板
• 📈 采纳率趋势分析
• 📋 事件浏览和搜索
• ⚙️ 配置管理界面
• 🌙 暗色主题设计

快速开始

环境要求

• Node.js >= 18
• pnpm >= 8

安装

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

开发

# 启动开发服务器（端口 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：

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
    },
  },
}

相关仓库

• ide-data-collector - IDE插件 Monorepo
• collector-backend - 数据采集后端

许可证

MIT License