Просмотр исходного кода

📝 docs(prd): update supply chain visualization epic architecture

- change from 8 independent dashboards to 4 combined dashboards architecture
- add routing architecture with dynamic parameters: /supply-chain/grain-oil, /supply-chain/seed-fruit, etc.
- create unified SupplyChainDashboard component with dynamic data loading
- implement SupplyChainContext for centralized data management
- update stories to reflect new architecture: 005.002-005.007
- adjust acceptance criteria for 4 combined dashboards
- add unified data structure and Context design documentation
- update component structure with unified entry point
- add version history for architecture refactoring on 2025-11-15

📝 docs(prd): update supply chain dashboard implementation details

- modify epic goal to reflect 4 combined industry dashboards with route parameter switching
- update technical implementation to include unified data Context and routing
- adjust success criteria for 4 combined dashboards instead of 8 independent ones
- update completion definition with new component and context requirements
- add detailed location coordinates for seed-fruit and other combinations
- update data integration stories with specific coordinate information
- adjust timeline and version history with latest architecture changes
yourname 2 месяцев назад
Родитель
Сommit
99aa8e707f
1 измененных файлов с 106 добавлено и 78 удалено
  1. 106 78
      docs/prd/epic-005-supply-chain-visualization.md

+ 106 - 78
docs/prd/epic-005-supply-chain-visualization.md

@@ -1,9 +1,13 @@
 # 供应链可视化大屏实现 - Brownfield Epic
 
 ## Epic Goal
-实现8个农业产业的供应链可视化大屏,提供直观的数据展示和供应链网络可视化,集成到现有项目的home页面中,为农业企业决策者提供全面的产业数据洞察。
+实现4套农业产业组合的供应链可视化大屏,通过浏览器地址路由参数切换不同组合,每套组合内支持产业切换,提供直观的数据展示和供应链网络可视化,集成到现有项目的home页面中,为农业企业决策者提供全面的产业数据洞察。
 
-**更新说明**:基于最新的Figma设计文档分析,产业数量从4个扩展到8个(粮食、油脂、种业、果蔬、畜牧、水产、鲜食、泛盐)。
+**架构更新**:从8个独立大屏改为4套组合大屏:
+- 粮食-油脂组合
+- 种业-果蔬组合
+- 畜牧-水产组合
+- 鲜食-泛盐组合
 
 ## Epic Description
 
@@ -14,82 +18,61 @@
 - **现有页面**:✅ 已有HomePage、LoginPage、MemberPage等基础页面
 
 ### 增强详情
-- **新增内容**:8个农业产业的可视化大屏(粮食、油脂、种业、果蔬、畜牧、水产、鲜食、泛盐),包含地图可视化、供应链网络、关键指标展示
-- **集成方式**:在`src/client/home/pages/SupplyChainDashboards/`目录下创建新的页面组件,使用现有Tailwind CSS样式系统
-- **技术实现**:React组件 + CSS可视化效果 + Recharts图表库,不引入额外地图库
+- **新增内容**:4套农业产业组合的可视化大屏(粮食-油脂、种业-果蔬、畜牧-水产、鲜食-泛盐),包含地图可视化、供应链网络、关键指标展示
+- **集成方式**:创建统一的`SupplyChainDashboard`组件,通过路由参数动态加载不同组合数据
+- **技术实现**:React组件 + CSS可视化效果 + Recharts图表库 + 统一数据Context,不引入额外地图库
+- **路由架构**:通过路由参数动态切换组合,如`/supply-chain/grain-oil`、`/supply-chain/seed-fruit`等
 - **成功标准**:
-  - ✅ 8个大屏功能完整实现
+  - ✅ 4套组合大屏功能完整实现
   - ⏱️ 大屏页面加载时间 < 3秒
   - 🎨 视觉设计与Figma设计一致
   - 📊 关键数据指标准确显示
-  - 🔄 大屏切换响应时间 < 1秒
+  - 🔄 组合内切换响应时间 < 1秒
   - 🎯 严格遵循1920*1080分辨率设计
+  - 🔗 路由参数切换正常工作
 
 ## Stories
 
-1. **Story 005.001**: ✅ 粮食大屏实现
+1. **Story 005.001**: ✅ 粮食-油脂组合大屏实现
    - ✅ 创建GrainOilDashboard组件(支持粮食和油脂切换)
    - ✅ 实现粮食供应链地图可视化
    - ✅ 添加粮食产业关键指标展示
    - ✅ 集成粮食产业数据卡片
    - ✅ 实现导航和交互功能
-
-2. **Story 005.002**: 油脂大屏实现
-   - 创建OilDashboard组件
-   - 实现油脂供应链地图可视化
-   - 添加油脂产业关键指标展示
-   - 集成油脂产业数据卡片
-   - 实现菜籽油产业链联合体展示
-
-3. **Story 005.003**: 种业大屏实现
-   - 创建SeedDashboard组件
-   - 实现种业供应链地图可视化
-   - 添加种业产业关键指标展示
-   - 集成种业产业数据卡片
-   - 实现种业产业链展示
-
-4. **Story 005.004**: 果蔬大屏实现
-   - 创建FruitVegetableDashboard组件
-   - 实现果蔬供应链地图可视化
-   - 添加果蔬产业关键指标展示
-   - 集成果蔬产业数据卡片
-   - 实现果蔬供应链网络展示
-
-5. **Story 005.005**: 畜牧大屏实现
-   - 创建LivestockDashboard组件
-   - 实现畜牧供应链地图可视化
-   - 添加畜牧产业关键指标展示
-   - 集成畜牧产业数据卡片
-   - 实现畜牧产业链展示
-
-6. **Story 005.006**: 水产大屏实现
-   - 创建AquacultureDashboard组件
-   - 实现水产供应链地图可视化
-   - 添加水产产业关键指标展示
-   - 集成水产产业数据卡片
-   - 实现水产供应链网络展示
-
-7. **Story 005.007**: 鲜食大屏实现
-   - 创建FreshFoodDashboard组件
-   - 实现鲜食供应链地图可视化
-   - 添加鲜食产业关键指标展示
-   - 集成鲜食产业数据卡片
-   - 实现鲜食供应链网络展示
-
-8. **Story 005.008**: 泛盐大屏实现
-   - 创建SaltDashboard组件
-   - 实现泛盐供应链地图可视化
-   - 添加泛盐产业关键指标展示
-   - 集成泛盐产业数据卡片
-   - 实现盐业产业链展示
-
-9. **Story 005.009**: 大屏导航和切换功能
-   - 创建统一的导航组件
-   - 实现8个大屏间快速切换
-   - 添加状态管理和路由
-   - 优化用户体验和响应速度
-
-10. **Story 005.010**: 数据集成和API对接
+   - 🔄 重构为统一数据Context架构
+
+2. **Story 005.002**: 统一数据Context和路由架构
+   - 扩展ThemeContext为SupplyChainContext,统一管理所有产业数据
+   - 创建统一数据结构:定位点坐标、关键指标、供应链网络数据
+   - 实现路由参数解析,通过React Router的useParams获取当前组合
+   - 配置路由:`/supply-chain/grain-oil`、`/supply-chain/seed-fruit`、`/supply-chain/livestock-aquaculture`、`/supply-chain/fresh-food-salt`
+   - 优化数据加载和缓存机制
+
+3. **Story 005.003**: 统一SupplyChainDashboard组件
+   - 创建统一的SupplyChainDashboard组件作为所有组合的入口
+   - 根据路由参数动态加载对应组合的数据
+   - 实现组合内产业切换功能
+   - 集成所有基础组件(地图、指标、导航等)
+
+4. **Story 005.004**: 种业-果蔬组合数据集成
+   - 实现种业供应链地图可视化(定位点坐标:base1[1142.89,717.84], base2[1664.25,530.82], base3[1435,527.14], base4[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
+   - 实现果蔬供应链地图可视化(定位点坐标:base1[985,610.22], base2[1125.81,409.52], base3[1229.57,570], base4[1445,560.35], chain1[949.08,680.31])
+   - 添加种业和果蔬产业关键指标展示
+   - 集成种业和果蔬产业数据卡片
+
+5. **Story 005.005**: 畜牧-水产组合数据集成
+   - 实现畜牧供应链地图可视化(定位点坐标:base1[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
+   - 实现水产供应链地图可视化(定位点坐标:base1[1445,560.35], chain1[949.08,680.31], chain2[1178.36,418.4], chain3[1307.42,551.47], chain4[1403.37,603.77])
+   - 添加畜牧和水产产业关键指标展示
+   - 集成畜牧和水产产业数据卡片
+
+6. **Story 005.006**: 鲜食-泛盐组合数据集成
+   - 实现鲜食供应链地图可视化(定位点坐标:base1[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
+   - 实现泛盐供应链地图可视化(定位点坐标:base1[1445,560.35], chain1[949.08,680.31], chain2[1178.36,418.4], chain3[1319.74,441.51], chain4[1403.37,603.77])
+   - 添加鲜食和泛盐产业关键指标展示
+   - 集成鲜食和泛盐产业数据卡片
+
+7. **Story 005.007**: 数据集成和API对接
    - 创建供应链数据模型
    - 实现后端API接口
    - 集成前端数据获取
@@ -114,8 +97,11 @@
 ## 完成定义
 
 - [x] Story 005.001完成且验收标准满足
-- [ ] Story 005.002-005.008完成且验收标准满足
-- [ ] 8个大屏功能完整实现
+- [ ] Story 005.002-005.007完成且验收标准满足
+- [ ] 统一SupplyChainDashboard组件正常工作
+- [ ] 4套组合数据完整集成
+- [ ] 路由参数切换功能正常工作
+- [ ] 统一数据Context架构完整实现
 - [ ] 视觉设计与Figma设计一致
 - [ ] 性能指标达标(加载时间<3秒)
 - [ ] 集成点正常工作
@@ -150,14 +136,14 @@
 ### 前端架构
 - **位置**:`src/client/home/pages/SupplyChainDashboards/`
 - **组件结构**:
-  - `GrainDashboard.tsx` - 粮食大屏
-  - `OilDashboard.tsx` - 油脂大屏
-  - `SeedDashboard.tsx` - 种业大屏
-  - `FruitVegetableDashboard.tsx` - 果蔬大屏
-  - `LivestockDashboard.tsx` - 畜牧大屏
-  - `AquacultureDashboard.tsx` - 水产大屏
-  - `FreshFoodDashboard.tsx` - 鲜食大屏
-  - `SaltDashboard.tsx` - 泛盐大屏
+  - `SupplyChainDashboard.tsx` - 统一入口组件,根据路由参数动态加载数据
+  - `SupplyChainContext.tsx` - 统一数据Context(扩展自ThemeContext)
+  - `GrainOilDashboard.tsx` - 粮食-油脂组合(可重构为数据配置)
+- **路由架构**:
+  - `/supply-chain/grain-oil` - 粮食-油脂组合
+  - `/supply-chain/seed-fruit` - 种业-果蔬组合
+  - `/supply-chain/livestock-aquaculture` - 畜牧-水产组合
+  - `/supply-chain/fresh-food-salt` - 鲜食-泛盐组合
 
 ### 组件库架构
 - **位置**:`src/client/home/pages/SupplyChainDashboards/components/`
@@ -249,19 +235,59 @@
   - 鲜食产业:主色 #DE7E66
   - 泛盐产业:主色 #92A5FE
 
+### 统一数据Context设计
+- **扩展ThemeContext**:创建SupplyChainContext,统一管理所有产业数据
+- **数据结构**:
+  ```typescript
+  // 组合类型定义
+  type DashboardType = 'grain-oil' | 'seed-fruit' | 'livestock-aquaculture' | 'fresh-food-salt';
+
+  interface SupplyChainData {
+    // 组合名称
+    name: string;
+    // 支持的产业
+    industries: IndustryType[];
+    // 定位点数据
+    mapPoints: Record<IndustryType, LocationPoint[]>;
+    // 关键指标数据
+    keyMetrics: Record<IndustryType, MetricData[]>;
+    // 供应链网络数据
+    supplyChainNetwork: Record<IndustryType, SupplyChainNetwork>;
+    // 弹出框数据
+    popupData: Record<IndustryType, PopupData[]>;
+  }
+
+  interface SupplyChainContextType {
+    // 当前组合类型
+    currentDashboard: DashboardType;
+    // 当前产业
+    currentIndustry: IndustryType;
+    // 主题色
+    themeColor: string;
+    // 当前组合数据
+    currentData: SupplyChainData | null;
+    // 设置方法
+    setDashboard: (dashboard: DashboardType) => void;
+    setIndustry: (industry: IndustryType) => void;
+  }
+  ```
+
 ### 数据集成
 - **API端点**:新增供应链相关API
 - **数据模型**:创建供应链实体和关系
 - **状态管理**:使用React Query进行服务端状态管理
+- **路由集成**:通过URL参数加载对应组合数据
 
 ## 验收标准
 
 ### 功能验收
-- [ ] 8个大屏页面正常显示
+- [ ] 4套组合大屏页面正常显示
+- [ ] 路由参数切换正常工作(`?dashboard=粮食-油脂`等)
+- [ ] 组合内产业切换功能正常
 - [ ] 地图可视化效果正确
 - [ ] 供应链网络展示完整
 - [ ] 关键数据指标准确
-- [ ] 导航切换功能正常
+- [ ] 统一数据Context正常工作
 - [ ] 产业图标和颜色系统正确
 - [ ] 数据卡片组件统一规范
 - [ ] 严格遵循1920*1080分辨率
@@ -400,4 +426,6 @@
 |------|---------|-------------|--------|
 | 2025-11-06 | 1.0 | 初始史诗创建 | Bob (SM) |
 | 2025-11-06 | 1.1 | 基于最新Figma设计更新,产业数量从4个扩展到8个 | Bob (SM) |
-| 2025-11-15 | 1.2 | Story 005.001粮食大屏实现完成,更新验收标准和完成状态 | Claude |
+| 2025-11-15 | 1.2 | Story 005.001粮食大屏实现完成,更新验收标准和完成状态 | Claude |
+| 2025-11-15 | 1.3 | **架构重构**:从8个独立大屏改为4套组合大屏,添加路由参数和统一数据Context | Claude |
+| 2025-11-15 | 1.4 | **架构优化**:采用统一入口组件,通过路由参数动态加载数据 | Claude |