📝 docs(prd): 完善供应链可视化组件架构文档

- 新增可复用基础组件架构章节，基于Figma-JSX分析详细定义7大类组件
- 细化组件接口规范，包括Props定义、状态管理和配置选项
- 补充组件开发最佳实践，包含复用策略、样式集成、性能优化和开发工作流
- 增加组件架构验收标准，确保组件体系完整实现
- 完善设计组件规范，明确四大组件体系的具体实现要求

docs/prd/epic-005-supply-chain-visualization.md

@@ -162,6 +162,50 @@
   - `DataCard.tsx` - 数据卡片组件
   - `IndustryIcon.tsx` - 产业图标组件
 
+### 可复用基础组件架构（基于Figma-JSX分析）
+
+#### 1. 图标组件 (Icon Components)
+- **`IndustryIcon`** - 产业图标组件，支持8个产业类型配置
+- **Props接口**：`property1?: "粮食" | "油脂" | "种业" | "果蔬" | "畜牧" | "水产" | "鲜食" | "泛盐"`
+- **状态管理**：支持激活/非激活状态的颜色变化
+
+#### 2. 文本组件 (Text Components)
+- **`SupplyChainText`** - 统一文本组件
+- **配置选项**：
+  - `propValue?: "24px" | "26px" | "34px"` - 字号
+  - `propValue1?: "特粗"` - 字重
+  - `propValue2?: "左对齐" | "右对齐" | "居中对齐"` - 对齐方式
+- **字体规范**：HarmonyOS Sans SC Bold 字体族
+
+#### 3. 导航组件 (Navigation Components)
+- **`VerticalNavigation`** - 左侧垂直导航栏
+- **配置选项**：
+  - `property1?: "上" | "下"` - 导航位置状态
+  - `activeTab` - 当前激活的产业
+  - `onTabChange` - 切换回调
+
+#### 4. 地图可视化组件 (Map Visualization Components)
+- **`SupplyChainNetwork`** - 供应链连接线网络
+- **`IndustryChainPoint`** - 产业链定位点（带蓝色光晕）
+- **`BasePoint`** - 基地定位点（带产业图标）
+- **`MapBorder`** - 地图边框组件
+
+#### 5. 数据展示组件 (Data Display Components)
+- **`DataCard`** - 数据卡片（带渐变背景的数字展示）
+- **`PopupInfoBox`** - 弹出信息框（带箭头指示器）
+- **`KeyMetricsPanel`** - 关键指标面板
+
+#### 6. 布局容器组件 (Layout Container Components)
+- **`HeaderBar`** - 顶部标题栏背景
+- **`BackgroundGrid`** - 底部网格背景
+- **`SupplyChainBackground`** - 供应链专用界面背景
+
+#### 7. 组件复用策略
+- **跨产业共享**：所有8个产业大屏使用相同的组件架构
+- **配置驱动**：通过props参数实现产业特定的视觉差异
+- **样式继承**：统一的颜色系统、字体规范、间距标准
+- **模块化设计**：每个组件独立可测试、可维护
+
 ### 样式系统
 - **技术**：Tailwind CSS + 自定义CSS变量
 - **设计规范**：严格遵循Figma设计稿
@@ -194,6 +238,16 @@
 - [ ] 数据卡片组件统一规范
 - [ ] 严格遵循1920*1080分辨率
 
+### 组件架构验收
+- [ ] 基础组件体系完整实现（图标、文本、导航）
+- [ ] 地图可视化组件体系完整（网络、定位点、边框）
+- [ ] 数据展示组件体系完整（卡片、弹出框、指标面板）
+- [ ] 布局容器组件体系完整（背景、网格、标题栏）
+- [ ] 组件复用策略正确实施
+- [ ] 跨产业共享组件正常工作
+- [ ] Props接口规范统一
+- [ ] 状态管理机制完善
+
 ### 性能验收
 - [ ] 页面加载时间 < 3秒
 - [ ] 大屏切换响应时间 < 1秒
@@ -228,14 +282,56 @@
 - **依赖管理**：不安装Tailwind作为依赖，除非用户明确指示
 
 ### 设计组件规范
-基于Figma设计文档，需要实现以下核心组件：
-- **基础组件**：图标组件、报表头部组件、底框容器组件、数据标签组件
-- **地图组件**：供应链网络连接线、基地定位点、产业链定位点
-- **数据组件**：数据卡片、指标展示、图表组件
-- **导航组件**：左侧导航栏、产业切换按钮
+基于Figma设计文档分析，需要实现以下核心组件体系：
+
+#### 基础组件体系
+- **图标组件**：`IndustryIcon` - 支持8个产业类型的可配置图标
+- **文本组件**：`SupplyChainText` - 支持多种字号、字重、对齐方式的统一文本
+- **导航组件**：`VerticalNavigation` - 左侧垂直导航栏，支持位置状态切换
+
+#### 地图可视化组件体系
+- **网络组件**：`SupplyChainNetwork` - 供应链连接线网络（包含17条连接线）
+- **定位点组件**：
+  - `IndustryChainPoint` - 产业链定位点（蓝色光晕效果）
+  - `BasePoint` - 基地定位点（产业图标展示）
+- **边框组件**：`MapBorder` - 地图边框装饰
+
+#### 数据展示组件体系
+- **数据卡片**：`DataCard` - 带渐变背景的数字展示卡片
+- **弹出框**：`PopupInfoBox` - 带箭头指示器的信息展示框
+- **指标面板**：`KeyMetricsPanel` - 关键指标展示区域
+
+#### 布局容器组件体系
+- **背景组件**：`SupplyChainBackground` - 供应链专用界面背景
+- **网格组件**：`BackgroundGrid` - 底部网格背景装饰
+- **标题栏**：`HeaderBar` - 顶部标题栏背景
+
+### 组件开发最佳实践
+
+#### 1. 组件复用策略
+- **统一接口**：所有组件使用一致的props命名规范
+- **配置驱动**：通过props参数实现产业特定的视觉差异
+- **状态管理**：支持激活/非激活状态的样式变化
+
+#### 2. 样式系统集成
+- **精确匹配**：严格遵循Figma设计中的尺寸、颜色、间距
+- **字体规范**：统一使用 HarmonyOS Sans SC Bold 字体族
+- **颜色系统**：遵循产业特定的颜色编码
+
+#### 3. 性能优化
+- **组件懒加载**：地图和复杂组件按需加载
+- **图片优化**：静态图片资源预加载和缓存
+- **渲染优化**：避免不必要的重渲染
+
+#### 4. 开发工作流
+- **先分析后实现**：每个组件实现前必须仔细阅读对应figma-jsx.md文件
+- **组件测试**：确保组件在不同产业配置下正常工作
+- **视觉验证**：与Figma设计稿进行像素级对比验证
 
 ### 重要开发原则
 - **在实现每个组件和每个步骤时，必须先查看JSXMD文件**
 - **确保准确重现Figma设计的视觉效果和布局**
 - **严格按照1920*1080分辨率实现所有尺寸和间距**
-- **保持与设计文档中完全一致的组件结构和样式**
+- **保持与设计文档中完全一致的组件结构和样式**
+- **遵循统一的组件命名和props接口规范**
+- **实现跨产业共享的可复用组件架构**