|
@@ -1,7 +1,7 @@
|
|
|
# Story 006.003: 实现财务数据可视化大屏静态页面
|
|
# Story 006.003: 实现财务数据可视化大屏静态页面
|
|
|
|
|
|
|
|
## Status
|
|
## Status
|
|
|
-Ready for Review
|
|
|
|
|
|
|
+In Progress
|
|
|
|
|
|
|
|
## Story
|
|
## Story
|
|
|
**As a** 财务数据可视化大屏用户,
|
|
**As a** 财务数据可视化大屏用户,
|
|
@@ -64,6 +64,20 @@ Ready for Review
|
|
|
- [ ] **检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
|
|
- [ ] **检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
|
|
|
- [ ] **重命名SVG文件** - 将实际为SVG格式但使用.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
|
|
## Dev Notes
|
|
|
|
|
|
|
@@ -240,6 +254,7 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
|
|
|
## Change Log
|
|
## Change Log
|
|
|
| Date | Version | Description | Author |
|
|
| 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.1 | 添加图片格式检查和重命名任务 - 发现大多数Figma图片实际为SVG格式 | Bob (Scrum Master) |
|
|
|
| 2025-11-14 | 1.0 | 初始故事创建 - 专注于实现1920*1080静态页面效果 | 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的问题
|
|
- ✅ 修复了BaseContainer组件缺少className的问题
|
|
|
- ✅ 通过所有验证测试
|
|
- ✅ 通过所有验证测试
|
|
|
|
|
|
|
|
|
|
+### 布局对比分析结果
|
|
|
|
|
+基于与figma-jsx.md设计规范的对比,发现当前实现存在以下主要差异:
|
|
|
|
|
+- **头部区域**:缺少复杂的装饰元素和精确布局(设计规范第400-496行)
|
|
|
|
|
+- **模块布局**:当前是单列垂直排列,设计是两列布局(左侧:资产负债率、收入;右侧:利润总额与净利润、资产负债率百分比)
|
|
|
|
|
+- **图表结构**:缺少详细的表格、坐标轴和网格线
|
|
|
|
|
+- **装饰元素**:缺少发光边框、渐变效果等视觉元素
|
|
|
|
|
+- **浮动按钮**:当前是简单"+"按钮,设计是带有"变动幅度"文字的复杂图标按钮(第1321-1333行)
|
|
|
|
|
+
|
|
|
|
|
+需要按照设计规范重新实现精确的布局和视觉效果。
|
|
|
|
|
+
|
|
|
### File List
|
|
### File List
|
|
|
- `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (新建)
|
|
- `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (新建)
|
|
|
- `src/client/home/pages/FinancialDashboard/components/Icon.tsx` (新建)
|
|
- `src/client/home/pages/FinancialDashboard/components/Icon.tsx` (新建)
|