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

📝 docs(stories): update financial dashboard story status and tasks

- change story status from "Ready for Review" to "In Progress"
- add detailed implementation tasks for main layout structure
- add detailed implementation tasks for data module internal structure
- add verification and optimization tasks
- add 2025-11-14 version 1.2 change log entry
- add layout comparison analysis results section
- identify main differences between current implementation and figma-jsx.md design specifications
yourname 2 месяцев назад
Родитель
Сommit
2e3bd66311

+ 26 - 1
docs/stories/006.003.实现财务数据可视化大屏静态页面.md

@@ -1,7 +1,7 @@
 # Story 006.003: 实现财务数据可视化大屏静态页面
 
 ## Status
-Ready for Review
+In Progress
 
 ## Story
 **As a** 财务数据可视化大屏用户,
@@ -64,6 +64,20 @@ Ready for Review
   - [ ] **检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
   - [ ] **重命名SVG文件** - 将实际为SVG格式但使用.png扩展名的文件重命名为.svg扩展名
   - [ ] 配置图片引用路径
+- [ ] 完善主页面布局结构 (AC: 2, 3)
+  - [ ] **重新实现头部区域** - 按照figma-jsx.md第400-496行实现完整的头部装饰系统
+  - [ ] **实现两列布局** - 将四个数据模块分为左右两列布局(左侧:资产负债率、收入;右侧:利润总额与净利润、资产负债率百分比)
+  - [ ] **添加浮动按钮** - 按照figma-jsx.md第1321-1333行实现完整的浮动按钮和文字
+  - [ ] **完善背景系统** - 按照figma-jsx.md实现完整的背景遮罩和网格系统
+- [ ] 完善数据模块内部结构 (AC: 2, 4)
+  - [ ] **实现完整的表格结构** - 为每个数据模块添加坐标轴、网格线、数据标签
+  - [ ] **精确柱形图布局** - 按照figma-jsx.md实现精确的柱形图高度和位置
+  - [ ] **添加装饰元素** - 实现发光边框、渐变效果等视觉装饰
+  - [ ] **完善数据标签** - 添加年份标签、数值标签和单位说明
+- [ ] 验证和优化 (AC: 3)
+  - [ ] **严格验证1920*1080分辨率** - 确保所有尺寸和位置精确匹配设计
+  - [ ] **测试大屏显示效果** - 验证在大屏设备上的显示效果
+  - [ ] **优化性能** - 确保页面加载和渲染性能
 
 ## Dev Notes
 
@@ -240,6 +254,7 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
+| 2025-11-14 | 1.2 | 补充完善任务列表 - 基于与figma-jsx.md设计规范的对比分析 | James (Developer) |
 | 2025-11-14 | 1.1 | 添加图片格式检查和重命名任务 - 发现大多数Figma图片实际为SVG格式 | Bob (Scrum Master) |
 | 2025-11-14 | 1.0 | 初始故事创建 - 专注于实现1920*1080静态页面效果 | Bob (Scrum Master) |
 
@@ -275,6 +290,16 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
 - ✅ 修复了BaseContainer组件缺少className的问题
 - ✅ 通过所有验证测试
 
+### 布局对比分析结果
+基于与figma-jsx.md设计规范的对比,发现当前实现存在以下主要差异:
+- **头部区域**:缺少复杂的装饰元素和精确布局(设计规范第400-496行)
+- **模块布局**:当前是单列垂直排列,设计是两列布局(左侧:资产负债率、收入;右侧:利润总额与净利润、资产负债率百分比)
+- **图表结构**:缺少详细的表格、坐标轴和网格线
+- **装饰元素**:缺少发光边框、渐变效果等视觉元素
+- **浮动按钮**:当前是简单"+"按钮,设计是带有"变动幅度"文字的复杂图标按钮(第1321-1333行)
+
+需要按照设计规范重新实现精确的布局和视觉效果。
+
 ### File List
 - `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (新建)
 - `src/client/home/pages/FinancialDashboard/components/Icon.tsx` (新建)