# H5 Monorepo 工程

基于 pnpm workspace 的 Monorepo 项目，包含 Vue3 大屏和 Vue3 移动端两个子项目。

## 项目结构

```
H5/
├── packages/
│   ├── screen/          # Vue3 大屏项目
│   │   ├── src/
│   │   │   ├── views/
│   │   │   ├── components/
│   │   │   ├── router/
│   │   │   ├── store/
│   │   │   └── styles/
│   │   ├── vite.config.js
│   │   └── package.json
│   ├── mobile/          # Vue3 移动端项目
│   │   ├── src/
│   │   │   ├── views/
│   │   │   ├── components/
│   │   │   ├── router/
│   │   │   └── styles/
│   │   ├── vite.config.js
│   │   └── package.json
│   └── shared/          # 共享代码库
│       ├── api/         # 接口封装
│       ├── utils/       # 工具函数
│       ├── config/      # 配置文件
│       └── package.json
├── pnpm-workspace.yaml
├── package.json
└── README.md
```

## 技术栈

### 大屏项目 (screen)
- Vue 3
- Vite 5
- Vue Router 4
- Pinia
- ECharts 5
- Vue-ECharts
- Sass

### 移动端项目 (mobile)
- Vue 3
- Vite 5
- Vue Router 4
- Pinia
- Vant 4（移动端 UI 组件库）
- 自动按需引入组件
- Sass

### 共享库 (shared)
- Axios（请求封装）
- 工具函数（防抖/节流/日期格式化/深拷贝等）
- 统一配置管理

## 快速开始

### 安装依赖

```bash
# 安装 pnpm (如果还没安装)
npm install -g pnpm

# 安装所有依赖
pnpm install
```

### 开发命令

```bash
# 启动大屏项目（端口：3000）
pnpm dev:screen

# 启动 H5 移动端（端口：8080）
pnpm dev:mobile

# 构建大屏项目
pnpm build:screen

# 构建 H5 移动端
pnpm build:mobile

# 构建所有项目
pnpm build:all

# 代码检查
pnpm lint
```

## 项目说明

### 1. 大屏项目 (screen)

**访问地址：** `http://localhost:3000`

**特点：**
- 适配大屏分辨率 (1920x1080)
- 数据可视化（ECharts）
- 暗色主题设计
- 响应式布局

**目录结构：**
```
packages/screen/src/
  ├── views/         # 页面组件
  ├── components/    # 通用组件
  ├── router/        # 路由配置
  ├── store/         # Pinia 状态管理
  ├── assets/        # 静态资源
  └── styles/        # 全局样式
```

### 2. 移动端项目 (mobile)

**访问地址：** `http://localhost:8080`

**特点：**
- 响应式设计，适配移动端
- Vant UI 组件库
- 自动按需引入，减小包体积
- 支持 PWA
- 适合嵌入第三方 APP

**可用组件：**
- NavBar（导航栏）
- Tabbar（底部导航）
- Cell/CellGroup（单元格列表）
- Grid（宫格）
- Button（按钮）
- Toast（轻提示）
- Dialog（弹窗）
- Image（图片）
- 等 60+ 组件

**目录结构：**
```
packages/mobile/src/
  ├── views/         # 页面组件
  ├── components/    # 通用组件
  ├── router/        # 路由配置
  ├── store/         # Pinia 状态管理
  ├── assets/        # 静态资源
  └── styles/        # 全局样式
```

### 3. 共享库 (shared)

共享代码可在两个项目中复用：

```javascript
// 在项目中引入 API
import { getUserInfo, getDataList } from '@shared/api'

// 引入工具函数
import { formatDate, debounce, throttle } from '@shared/utils'

// 引入配置
import { API_CONFIG, APP_CONFIG } from '@shared/config'
```

**可用工具函数：**
- `formatDate()` - 日期格式化
- `debounce()` - 防抖
- `throttle()` - 节流
- `deepClone()` - 深拷贝

## 环境变量

项目使用 `.env` 文件管理环境变量：

- `.env.development` - 开发环境
- `.env.production` - 生产环境

**示例：**
```bash
# .env.development
VITE_API_BASE_URL=http://localhost:3000/api
```

## 开发建议

### 1. 共享代码复用

将通用的业务逻辑、API 接口、工具函数放在 `packages/shared` 中，避免重复代码。

### 2. 组件开发

- **大屏项目**：使用 ECharts 开发数据可视化组件
- **移动端项目**：优先使用 Vant 组件，减少自定义开发

### 3. 样式规范

- 使用 Sass 预处理器
- 遵循 BEM 命名规范
- 组件样式使用 `scoped`

### 4. API 请求

统一使用 `@shared/api` 中封装的请求方法，自动处理 token、错误等。

## 注意事项

1. 本项目使用 **JavaScript**，未使用 TypeScript
2. 使用 **pnpm** 作为包管理工具，不要使用 npm 或 yarn
3. 大屏和移动端项目独立运行，通过 shared 包共享代码
4. 移动端项目基于 Vue3 + Vant，**不是 uni-app**，仅支持 H5
5. 如需扩展到小程序，建议使用 uni-app 或 Taro 重新搭建

## 部署说明

### 大屏项目部署

```bash
# 构建
pnpm build:screen

# 构建产物在 packages/screen/dist
# 部署到 Nginx 或其他静态服务器
```

### 移动端部署

```bash
# 构建
pnpm build:mobile

# 构建产物在 packages/mobile/dist
# 可以嵌入到第三方 APP 的 WebView 中
```

## 浏览器支持

### 大屏项目
- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

### 移动端项目
- iOS Safari >= 10
- Android Chrome >= 5.0
- 微信浏览器

## 常见问题

### 1. 端口被占用

修改对应项目的 `vite.config.js` 中的 `server.port` 配置。

### 2. 组件按需引入不生效

移动端项目使用 `unplugin-vue-components` 自动按需引入 Vant 组件，无需手动引入。

### 3. 如何添加新页面？

```bash
# 1. 在 src/views 中创建页面组件
# 2. 在 src/router/index.js 中添加路由配置
```

## 技术支持

- Vue 3 文档：https://cn.vuejs.org/
- Vant 文档：https://vant-ui.github.io/vant/
- ECharts 文档：https://echarts.apache.org/zh/index.html
- Pinia 文档：https://pinia.vuejs.org/zh/

## 许可证

MIT