|
@@ -24,6 +24,7 @@ Draft
|
|
|
- [ ] 实现1920x1080大屏布局结构
|
|
- [ ] 实现1920x1080大屏布局结构
|
|
|
- [ ] 集成Tailwind CSS样式系统
|
|
- [ ] 集成Tailwind CSS样式系统
|
|
|
- [ ] 实现地图可视化效果 (AC: #2)
|
|
- [ ] 实现地图可视化效果 (AC: #2)
|
|
|
|
|
+ - [ ] 使用Figma MCP工具查看地图设计细节
|
|
|
- [ ] 创建供应链网络连接线可视化组件
|
|
- [ ] 创建供应链网络连接线可视化组件
|
|
|
- [ ] 实现基地定位点图标和交互
|
|
- [ ] 实现基地定位点图标和交互
|
|
|
- [ ] 实现产业链定位点图标和交互
|
|
- [ ] 实现产业链定位点图标和交互
|
|
@@ -38,6 +39,7 @@ Draft
|
|
|
- [ ] 实现储备仓容数据展示
|
|
- [ ] 实现储备仓容数据展示
|
|
|
- [ ] 创建数据卡片组件和样式
|
|
- [ ] 创建数据卡片组件和样式
|
|
|
- [ ] 实现导航和交互功能 (AC: #5)
|
|
- [ ] 实现导航和交互功能 (AC: #5)
|
|
|
|
|
+ - [ ] 使用Figma MCP工具查看导航设计细节
|
|
|
- [ ] 创建左侧导航栏组件
|
|
- [ ] 创建左侧导航栏组件
|
|
|
- [ ] 实现产业图标和文字导航
|
|
- [ ] 实现产业图标和文字导航
|
|
|
- [ ] 添加导航交互状态管理
|
|
- [ ] 添加导航交互状态管理
|
|
@@ -69,6 +71,8 @@ Draft
|
|
|
- **Props定义**: 使用TypeScript接口定义组件Props
|
|
- **Props定义**: 使用TypeScript接口定义组件Props
|
|
|
|
|
|
|
|
### 设计规范和视觉要求 [Source: Figma设计分析]
|
|
### 设计规范和视觉要求 [Source: Figma设计分析]
|
|
|
|
|
+**重要提示**: 开发代理必须使用 Figma MCP 工具查看设计细节,以获得完整的视觉规范和组件代码
|
|
|
|
|
+- **Figma设计链接**: https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/%E5%8F%AF%E8%A7%86%E5%8C%96%E7%B4%A0%E6%9D%902-25?node-id=1214-35528&m=dev
|
|
|
- **屏幕尺寸**: 1920x1080大屏显示
|
|
- **屏幕尺寸**: 1920x1080大屏显示
|
|
|
- **颜色系统**:
|
|
- **颜色系统**:
|
|
|
- 文字颜色: #FFFFFF (白色), #00FFFF (青色)
|
|
- 文字颜色: #FFFFFF (白色), #00FFFF (青色)
|
|
@@ -76,6 +80,12 @@ Draft
|
|
|
- 边框颜色: #133BA0 (蓝色)
|
|
- 边框颜色: #133BA0 (蓝色)
|
|
|
- **字体规范**: HarmonyOS Sans SC Bold字体族
|
|
- **字体规范**: HarmonyOS Sans SC Bold字体族
|
|
|
- **图标系统**: 使用Figma提供的图标资源
|
|
- **图标系统**: 使用Figma提供的图标资源
|
|
|
|
|
+- **关键设计元素**:
|
|
|
|
|
+ - 左侧导航栏:粮食/油脂切换
|
|
|
|
|
+ - 地图可视化:供应链网络连接线、基地定位点、产业链定位点
|
|
|
|
|
+ - 右侧数据展示:加工能力、自建基地、储备仓容
|
|
|
|
|
+ - 顶部标题:"粮食•油脂"
|
|
|
|
|
+ - 合作模式展示:"1+1+N" 供应链合作模式
|
|
|
|
|
|
|
|
### 性能要求 [Source: docs/prd/epic-005-supply-chain-visualization.md#性能验收]
|
|
### 性能要求 [Source: docs/prd/epic-005-supply-chain-visualization.md#性能验收]
|
|
|
- **页面加载时间**: < 3秒
|
|
- **页面加载时间**: < 3秒
|