|
|
@@ -1,7 +1,7 @@
|
|
|
# Story 006.003: 实现财务数据可视化大屏静态页面
|
|
|
|
|
|
## Status
|
|
|
-Ready for Review
|
|
|
+In Progress
|
|
|
|
|
|
## Story
|
|
|
**As a** 财务数据可视化大屏用户，
|
|
|
@@ -78,6 +78,18 @@ Ready for Review
|
|
|
- [x] **严格验证1920*1080分辨率** - 确保所有尺寸和位置精确匹配设计
|
|
|
- [x] **测试大屏显示效果** - 验证在大屏设备上的显示效果
|
|
|
- [x] **优化性能** - 确保页面加载和渲染性能
|
|
|
+- [ ] 实现变化幅度弹窗组件 (AC: 2)
|
|
|
+ - [ ] **先查看JSXMD文件** - 在实现前仔细阅读 `docs/战略部署主页面+弹窗figma-jsx.md` 中的弹窗设计规范
|
|
|
+ - [ ] 创建弹窗组件 `src/client/home/pages/FinancialDashboard/components/VariationModal.tsx`
|
|
|
+ - [ ] **实现弹窗背景和遮罩** - 按照figma-jsx.md第2135-2144行实现弹窗背景和遮罩层
|
|
|
+ - [ ] **实现弹窗容器** - 按照figma-jsx.md第2144-2145行实现1440x852px的弹窗容器
|
|
|
+ - [ ] **添加弹窗标题** - 按照figma-jsx.md第2146-2148行实现"变动幅度"标题
|
|
|
+ - [ ] **实现图例区域** - 按照figma-jsx.md第2149-2223行实现六个财务指标的图例
|
|
|
+ - [ ] **实现坐标轴系统** - 按照figma-jsx.md第2224-2257行实现Y轴刻度标签
|
|
|
+ - [ ] **实现Recharts柱状图** - 使用Recharts库实现柱状图，包含所有六个指标的数据
|
|
|
+ - [ ] **自定义图例颜色** - 确保图例颜色与当前四个图的柱子颜色保持一致
|
|
|
+ - [ ] **集成弹窗交互** - 将弹窗与主页面右下角浮动按钮关联
|
|
|
+ - [ ] **使用静态数据** - 使用硬编码的示例数据填充弹窗图表
|
|
|
|
|
|
## Dev Notes
|
|
|
|
|
|
@@ -233,6 +245,34 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
|
|
|
- 保持与现有项目技术栈的一致性
|
|
|
- 确保颜色样式尽量匹配Figma设计
|
|
|
|
|
|
+### 变化幅度弹窗技术规范 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2135-L2429]
|
|
|
+**弹窗组件结构**:
|
|
|
+- **弹窗容器**: 1440x852px，居中显示 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2144]
|
|
|
+- **遮罩层**: 全屏黑色半透明遮罩，带模糊效果 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2143]
|
|
|
+- **标题**: "变动幅度"，28px白色字体 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2146-L2148]
|
|
|
+
|
|
|
+**图例区域规范** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2149-L2223]:
|
|
|
+- **六个财务指标**: 资产总额、资产净额、资产负债率、收入、利润总额、净利润
|
|
|
+- **图例颜色**: 必须与当前四个图的柱子颜色保持一致
|
|
|
+- **图例样式**: 14px柱形图标 + 18px白色文字标签
|
|
|
+- **数据说明**: "*数据截止至2025年9月"，"单元：%"
|
|
|
+
|
|
|
+**坐标轴系统** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2224-L2257]:
|
|
|
+- **Y轴范围**: -50% 到 400%，包含0、50、100、150、200、250、300、350、400刻度
|
|
|
+- **Y轴位置**: 左侧82px宽度
|
|
|
+- **图表区域**: 1197x511px
|
|
|
+
|
|
|
+**柱状图实现要求**:
|
|
|
+- **使用Recharts库**: 实现多系列柱状图
|
|
|
+- **数据系列**: 六个财务指标的变化幅度数据
|
|
|
+- **颜色匹配**: 图例颜色与柱子颜色必须与主页面四个图保持一致
|
|
|
+- **静态数据**: 使用硬编码的示例变化幅度数据
|
|
|
+
|
|
|
+**交互集成**:
|
|
|
+- **触发方式**: 主页面右下角浮动按钮点击触发
|
|
|
+- **关闭方式**: 点击遮罩层或ESC键关闭弹窗
|
|
|
+- **状态管理**: 使用React useState管理弹窗显示状态
|
|
|
+
|
|
|
### 编码标准 [Source: architecture/coding-standards.md#关键集成规则]
|
|
|
- **现有API兼容性**: 确保组件不破坏现有API契约
|
|
|
- **错误处理**: 实现适当的错误边界和加载状态
|
|
|
@@ -261,6 +301,7 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
|
|
|
## Change Log
|
|
|
| Date | Version | Description | Author |
|
|
|
|------|---------|-------------|---------|
|
|
|
+| 2025-11-15 | 1.4 | 更新故事状态为In Progress - 增加变化幅度弹窗实现任务 | Bob (Scrum Master) |
|
|
|
| 2025-11-15 | 1.3 | 更新故事状态为Ready for Review - 财务数据可视化大屏静态页面已完全实现 | James (Developer) |
|
|
|
| 2025-11-14 | 1.2 | 补充完善任务列表 - 基于与figma-jsx.md设计规范的对比分析 | James (Developer) |
|
|
|
| 2025-11-14 | 1.1 | 添加图片格式检查和重命名任务 - 发现大多数Figma图片实际为SVG格式 | Bob (Scrum Master) |
|
yourname