📝 docs(story): add grain oil supply chain dashboard story

- 创建粮食油脂供应链可视化大屏相关的用户故事文档
- 定义农业企业决策者视角的需求和验收标准
- 列出组件创建、地图可视化、供应链网络展示等开发任务
- 提供技术栈、项目结构、设计规范等开发指导信息
- 添加测试策略和验证点，确保功能质量

docs/stories/005.001.story.md

@@ -0,0 +1,134 @@
+# Story 005.001: 粮食油脂大屏实现
+
+**父史诗**: 史诗005 - 供应链可视化大屏实现
+docs/prd/epic-005-supply-chain-visualization.md
+
+## Status
+Draft
+
+## Story
+**As a** 农业企业决策者
+**I want** 查看粮食油脂供应链的可视化大屏
+**so that** 我可以直观了解粮食油脂产业的供应链网络、关键指标和合作模式，为决策提供数据支持
+
+## Acceptance Criteria
+1. 创建GrainOilDashboard组件 - 组件结构完整，包含地图可视化、供应链网络、关键指标展示
+2. 实现地图可视化效果 - 显示供应链网络连接线，包含基地和产业链定位点
+3. 添加供应链网络展示 - 显示"1+1+N"合作模式，包含省粮油集团、区域公司、新型农业经营主体
+4. 集成关键指标数据展示 - 显示加工能力、自建优质水稻基地、储备仓容等关键数据
+5. 实现导航和交互功能 - 左侧导航栏支持产业切换，交互响应流畅
+
+## Tasks / Subtasks
+- [ ] 创建GrainOilDashboard组件 (AC: #1)
+  - [ ] 在`src/client/home/pages/SupplyChainDashboards/`目录下创建组件文件
+  - [ ] 实现1920x1080大屏布局结构
+  - [ ] 集成Tailwind CSS样式系统
+- [ ] 实现地图可视化效果 (AC: #2)
+  - [ ] 创建供应链网络连接线可视化组件
+  - [ ] 实现基地定位点图标和交互
+  - [ ] 实现产业链定位点图标和交互
+  - [ ] 添加地图边框和背景效果
+- [ ] 添加供应链网络展示 (AC: #3)
+  - [ ] 实现"1+1+N"合作模式展示
+  - [ ] 显示省粮油集团+区域公司+新型农业经营主体关系
+  - [ ] 添加合作模式标题和描述
+- [ ] 集成关键指标数据展示 (AC: #4)
+  - [ ] 实现加工能力数据展示（200万吨/年）
+  - [ ] 实现自建优质水稻基地数据展示（15万亩）
+  - [ ] 实现储备仓容数据展示
+  - [ ] 创建数据卡片组件和样式
+- [ ] 实现导航和交互功能 (AC: #5)
+  - [ ] 创建左侧导航栏组件
+  - [ ] 实现产业图标和文字导航
+  - [ ] 添加导航交互状态管理
+  - [ ] 优化大屏切换响应性能
+- [ ] 添加单元测试 (AC: #1-#5)
+  - [ ] 编写组件渲染测试
+  - [ ] 编写交互功能测试
+  - [ ] 验证数据展示正确性
+
+## Dev Notes
+
+### 技术栈和前端架构 [Source: architecture/tech-stack.md#前端框架]
+- **前端框架**: React 19.1.0 + TypeScript
+- **样式系统**: Tailwind CSS 4.1.11
+- **组件库**: shadcn/ui (基于Radix UI)
+- **构建工具**: Vite 7.0.0
+- **状态管理**: React Query (服务端状态) + Context (本地状态)
+
+### 项目结构指导 [Source: architecture/source-tree.md#前端应用]
+- **组件位置**: `src/client/home/pages/SupplyChainDashboards/GrainOilDashboard.tsx`
+- **共享组件**: `src/client/components/ui/` (使用现有shadcn/ui组件)
+- **样式文件**: 使用Tailwind CSS类名，遵循现有样式系统
+- **测试位置**: `tests/unit/client/home/pages/SupplyChainDashboards/GrainOilDashboard.test.tsx`
+
+### 组件架构模式 [Source: architecture/component-architecture.md#前端组件架构]
+- **组件组织**: 遵循现有React组件模式，使用函数组件和TypeScript
+- **状态管理**: 对于本地状态使用useState，对于服务端数据使用React Query
+- **样式约定**: 使用Tailwind CSS类名，保持与现有组件一致
+- **Props定义**: 使用TypeScript接口定义组件Props
+
+### 设计规范和视觉要求 [Source: Figma设计分析]
+- **屏幕尺寸**: 1920x1080大屏显示
+- **颜色系统**:
+  - 文字颜色: #FFFFFF (白色), #00FFFF (青色)
+  - 数据颜色: #C5FF92 (亮绿色)
+  - 边框颜色: #133BA0 (蓝色)
+- **字体规范**: HarmonyOS Sans SC Bold字体族
+- **图标系统**: 使用Figma提供的图标资源
+
+### 性能要求 [Source: docs/prd/epic-005-supply-chain-visualization.md#性能验收]
+- **页面加载时间**: < 3秒
+- **大屏切换响应时间**: < 1秒
+- **内存使用**: 合理，无内存泄漏
+- **渲染流畅**: 无卡顿
+
+### 测试标准要求 [Source: architecture/testing-strategy.md#单元测试]
+- **测试框架**: Vitest + Testing Library
+- **测试位置**: `tests/unit/client/home/pages/SupplyChainDashboards/`
+- **覆盖率目标**: ≥ 80%
+- **测试类型**: 组件渲染测试、交互测试、数据展示测试
+
+### 现有系统集成 [Source: docs/prd/epic-005-supply-chain-visualization.md#现有系统上下文]
+- **集成点**: 现有home页面架构、认证系统、UI组件库、样式系统
+- **兼容性**: 现有功能无回归，现有路由配置向后兼容
+- **认证**: 使用现有JWT认证系统
+
+## Testing
+### 测试策略
+- **测试类型**: 单元测试 + 集成测试
+- **测试范围**: 组件渲染、交互功能、数据展示
+- **测试工具**: Vitest + Testing Library
+- **测试数据**: 使用工厂模式创建测试数据
+
+### 测试验证点
+- 组件正确渲染和布局
+- 地图可视化效果显示正确
+- 供应链网络展示完整
+- 关键数据指标准确显示
+- 导航交互功能正常
+- 性能指标满足要求
+
+### 测试用例
+- 验证GrainOilDashboard组件渲染
+- 测试地图定位点交互
+- 验证数据卡片显示正确性
+- 测试导航切换功能
+- 验证响应式布局适配
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-11-06 | 1.0 | 初始故事创建 | Bob (SM) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results