# dashboards

**Repository Path**: playground_2/dashboards

## Basic Information

- **Project Name**: dashboards
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-10
- **Last Updated**: 2026-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dashboards Monorepo

基于 pnpm + Turborepo 的数据可视化工程骨架，涵盖销售、大数据、物流、公司经营等多类大屏应用；通过 `@dashboards/shared` / `@dashboards/chart` / `@dashboards/request` 三个基础包统一管理类型、图表配置与请求能力，分层对齐 [data-visualization-guide](../docs/data-visualization-guide.md) 推荐实践。

## 目录结构

```
dashboards/
├── apps/
│   ├── sales-screen/   # 销售数据可视化平台
│   ├── bigdata-screen/  # 大数据电子看板
│   ├── logistics-screen/ # 物流大数据平台
│   └── company-screen/  # 公司经营数据电子看板
├── packages/
│   ├── shared/         # @dashboards/shared — 类型、Mock、Transform
│   ├── chart/          # @dashboards/chart — ECharts 按需引入、React 封装、Option 预设
│   └── request/        # @dashboards/request — HTTP 客户端
├── package.json
├── pnpm-workspace.yaml
└── turbo.json
```

## 架构分层

```text
API / Mock (@dashboards/shared)
  → 数据规范化（types + transform）
  → 图表配置（@dashboards/chart options/presets）
  → 渲染组件（EChart + useECharts）
  → 应用壳层（sales-screen / bigdata-screen）
```

| 包 | 职责 |
|----|------|
| `@dashboards/shared` | 图表无关的数据类型、格式化、聚合工具、Mock 数据集 |
| `@dashboards/chart` | ECharts 5 按需注册、`useECharts` Hook、`EChart` 组件、主题 Token、Option 预设 |
| `@dashboards/request` | axios 封装，对接真实 API 时使用 |
| `sales-screen` | 销售数据可视化平台：实时拜访/订单滚动列表 |
| `bigdata-screen` | 大数据电子看板：模块一至四 + 垂直滚动列表 |
| `logistics-screen` | 物流大数据平台：运力概览 + 运单状态滚动列表 + 运营指标 |
| `company-screen` | 公司经营数据电子看板：库存/采购/物料滚动列表 + 经营趋势 + 仓库库龄分析 |

### company-screen

公司经营数据电子看板，含库存分析柱状图、库存/采购滚动表格、经营 KPI 与趋势图、物料排名滚动列表、出入库/仓库/库龄图表。

## 技术栈

| 应用 | 技术 |
|------|------|
| sales-screen | React 19 + Vite 6 + Tailwind CSS v4 + ECharts 5 |
| bigdata-screen | React 19 + Vite 6 + Tailwind CSS v4 + ECharts 5 |
| logistics-screen | React 19 + Vite 6 + Tailwind CSS v4 + ECharts 5 |
| company-screen | React 19 + Vite 6 + Tailwind CSS v4 + ECharts 5 |
| chart | ECharts 按需引入（Line / Bar / Pie / Funnel） |
| shared | TypeScript 共享类型与 Mock |

## 快速开始

```bash
cd dashboards
pnpm install

# 同时启动全部应用
pnpm dev

# 单独启动
pnpm dev:sales    # http://localhost:5181
pnpm dev:logistics # http://localhost:5183 (logistics-screen)
pnpm dev:company   # http://localhost:5184 (company-screen)
pnpm dev:bigdata   # http://localhost:5182 (bigdata-screen)
```

## 构建

```bash
pnpm build
pnpm typecheck
```

## 扩展指南

1. **新增图表类型**：在 `@dashboards/chart/src/echarts-core.ts` 注册 ECharts 模块，在 `options/presets.ts` 添加 Option 构建函数。
2. **接入真实 API**：在 `@dashboards/request` 创建 client，在应用层 fetch 后用 `@dashboards/shared/transform` 规范化后再传入图表。
3. **新增 VChart 路线**：可并行添加 `@dashboards/vchart` 包，与 ECharts 共用 `@dashboards/shared` 数据层。
4. **路由级懒加载**：图表页使用 `React.lazy` 减小首屏包体（见 data-visualization-guide §9.4）。

## 演示页面

### sales-screen

销售数据可视化平台，含实时拜访 / 实时订单垂直滚动列表。

### logistics-screen

物流大数据平台，含运力概览（运单量/在途车辆/异常订单）、运单状态垂直滚动列表（运单号/起始地→目的地/状态/时效）、运营指标（水波仪表盘/区域排名/关键指标/面积图）。

### bigdata-screen

大数据电子看板，模块一 / 模块三下方为垂直滚动列表，含数字翻牌、环形图、漏斗等。