feiniao-phenotype-vue

飞鸟田间表型平台（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 变量 视觉风格保持一致

启动

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，替换演示随机基地数据