# 飞鸟田间表型平台（Vue3 重构版）

由单文件原型 `飞鸟田间表型平台.html` 重构为标准 **Vite + Vue3 + Pinia + OpenLayers** 项目。

## 技术栈

- **Vite** 构建
- **Vue 3** + **Vue Router**（`App.vue` 使用 `router-view` 插槽，与 `feiniao-pc-vue` 一致）
- **Pinia** 状态管理（筛选层级、基地列表、地理数据）
- **ECharts Geo** 全国 / 省 / 市分布图（与原 HTML 原型一致：品类图标、胁迫涟漪、滚轮下钻）
- **OpenLayers** 基地详情地块图（`FarmMap`；底图同 `feiniao-pc-vue`：`img_wmts_mkt` + `cva_wmts_mkt`）
- **ECharts** 详情页指标曲线
- **Sass / 原版 CSS 变量** 视觉风格保持一致

## 启动

```bash
cd feiniao-phenotype-vue
npm install
npm run dev
```

浏览器打开终端提示的本地地址（默认 `http://localhost:5173`）。

## 目录结构

```
src/
  App.vue                 # 路由出口
  main.js
  router/                 # 总览 / 基地详情
  stores/                 # Pinia：bases / filter / geoData
  map/                    # ChinaMap.js / FarmMap.js（OpenLayers）
  components/             # Header / 统计 / 品类 / 基地列表
  views/overview|detail/  # 页面
  data/dict.js            # 品类字典
  data/realBases.js       # 实测基地 GIS（从原型提取）
  styles/app.css          # 原版界面样式
public/data/raw-geo.json  # 中国 / 省级 GeoJSON（ECharts UTF8 编码）
```

## 与原 HTML 的对应关系

| 原 HTML | 本项目 |
|--------|--------|
| ECharts Geo 全国图 | ECharts `ChinaMap` |
| `#farm` Canvas 地块 | OpenLayers `FarmMap` |
| `window.FN` / `S` 状态 | Pinia stores |
| 内联巨型 PHOTO/UAV 资源 | 未全量迁入（体积约 50MB+），详情页留扩展位 |
| 基地详情多 Tab | `views/detail` 骨架 + 地图 / 档案 / 曲线 |

## 后续可继续迁移

1. 原型 Script4 中的表型照片池、气象胁迫完整渲染
2. 采集策略 iframe / 航线编辑
3. `FN_UAV` 正射底图叠加到 `FarmMap`
4. 对接真实后端 API，替换演示随机基地数据