Kaynağa Gözat

📝 docs(stories): update financial dashboard development plan

- add detailed base component implementation tasks: Icon, ReportHeader, BaseContainer, BarElement, DataLabel, TimeIcon, GridBackground, BackgroundOverlay
- add unit test tasks for new base components
- add design component specifications including font, color, layout and effects
- update change log with version 1.2 and 1.3 changes
- clarify data module container layout requirements with specific financial metrics
yourname 2 ay önce
ebeveyn
işleme
95df9e39d1

+ 48 - 1
docs/stories/006.002.实现财务数据可视化大屏页面.md

@@ -17,8 +17,19 @@ Draft
 - [ ] 创建财务数据可视化大屏主页面组件 `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (AC: 1, 2)
 - [ ] 创建财务数据可视化大屏主页面组件 `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (AC: 1, 2)
   - [ ] 基于Figma设计实现主页面布局:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev`
   - [ ] 基于Figma设计实现主页面布局:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev`
   - [ ] **严格按照1920*1080分辨率实现布局**,确保在大屏设备上完美显示
   - [ ] **严格按照1920*1080分辨率实现布局**,确保在大屏设备上完美显示
-  - [ ] 实现四个数据模块的容器布局
+  - [ ] 实现四个数据模块的容器布局:资产负债率、收入、利润总额与净利润、资产负债率(百分比)
   - [ ] 添加右下角浮动按钮用于触发变动幅度弹窗
   - [ ] 添加右下角浮动按钮用于触发变动幅度弹窗
+  - [ ] 实现完整的页面背景和网格系统
+  - [ ] 集成所有基础组件构建完整页面
+- [ ] 创建基础组件 (AC: 2)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/Icon.tsx` - 返回按钮图标组件(包含旋转和缩放变换)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件(包含渐变背景和标题)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx` - 底框和头部容器组件(作为模块容器背景)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BarElement.tsx` - 柱形元素组件(支持多种颜色变体:资产总额、资产净额、利润总额、净利润、资产负债率)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/DataLabel.tsx` - 定位数据组件(包含数值显示和装饰元素)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx` - 时间图标组件
+  - [ ] `src/client/home/pages/FinancialDashboard/components/GridBackground.tsx` - 底部网格组件(包含背景网格图案)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` - 常规界面组件(包含背景图片和遮罩层)
 - [ ] 创建四个财务数据模块组件 (AC: 2)
 - [ ] 创建四个财务数据模块组件 (AC: 2)
   - [ ] `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` - 资产负债率模块(资产总额与资产净额)
   - [ ] `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` - 资产负债率模块(资产总额与资产净额)
   - [ ] `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` - 利润总额与净利润模块
   - [ ] `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` - 利润总额与净利润模块
@@ -34,6 +45,10 @@ Draft
   - [ ] 实现点击外部关闭功能
   - [ ] 实现点击外部关闭功能
 - [ ] 创建组件单元测试 (AC: 1, 2, 3)
 - [ ] 创建组件单元测试 (AC: 1, 2, 3)
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/FinancialDashboard.test.tsx` - 主页面测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/FinancialDashboard.test.tsx` - 主页面测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/Icon.test.tsx` - 图标组件测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ReportHeader.test.tsx` - 报表头部测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/BarElement.test.tsx` - 柱形元素测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/DataLabel.test.tsx` - 数据标签测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/AssetMetrics.test.tsx` - 资产模块测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/AssetMetrics.test.tsx` - 资产模块测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ProfitMetrics.test.tsx` - 利润模块测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ProfitMetrics.test.tsx` - 利润模块测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/IncomeMetrics.test.tsx` - 收入模块测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/IncomeMetrics.test.tsx` - 收入模块测试
@@ -50,6 +65,36 @@ Draft
 - **UI组件库**: shadcn/ui (基于Radix UI)
 - **UI组件库**: shadcn/ui (基于Radix UI)
 - **可视化组件**: Recharts (已集成在 `src/client/components/ui/chart.tsx`)
 - **可视化组件**: Recharts (已集成在 `src/client/components/ui/chart.tsx`)
 
 
+### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md]
+基于Figma设计文档,需要实现以下核心组件:
+
+**基础组件**:
+- `icon` - 返回按钮图标组件,包含旋转和缩放变换
+- `Component` - 报表头部组件,包含渐变背景和标题
+- `Component1` - 底框组件,作为容器背景
+- `Component2` - 头部组件,作为容器顶部
+- `Component3` - 柱形元素组件,支持多种颜色变体:
+  - `property2="1-1"` - 资产总额柱形(蓝色渐变)
+  - `property2="1-2"` - 资产净额柱形(黄色渐变)
+  - `property2="2-1"` - 利润总额柱形(黄色渐变)
+  - `property2="2-3"` - 净利润柱形(紫色渐变)
+  - `property2="2-4"` - 资产负债率柱形(蓝色渐变)
+- `Component7` - 定位数据组件,包含数值显示和装饰元素
+- `IconTime` - 时间图标组件
+- `Component4` - 底部网格组件,包含背景网格图案
+- `Component5` - 常规界面组件,包含背景图片和遮罩层
+
+**主页面组件结构**:
+- `Component6` - 战略部署主页面,聚合所有子组件
+- 包含四个主要数据模块:资产负债率、收入、利润总额与净利润、资产负债率(百分比)
+- 每个模块包含:头部标题、数据表格、柱形图、坐标轴、数值标签
+
+**样式规范**:
+- **字体**: HarmonyOS_Sans_SC:Regular, PingFang_SC:Regular, PingFang_SC:Medium, PingFang_SC:Heavy
+- **颜色**: 白色文本,半透明文本,渐变背景
+- **布局**: 绝对定位,精确像素控制
+- **特效**: 阴影、模糊、渐变、旋转变换
+
 ### 项目结构信息 [Source: architecture/source-tree.md#实际项目结构]
 ### 项目结构信息 [Source: architecture/source-tree.md#实际项目结构]
 - **前端页面位置**: `src/client/home/pages/FinancialDashboard/` (新建独立页面)
 - **前端页面位置**: `src/client/home/pages/FinancialDashboard/` (新建独立页面)
 - **组件位置**: `src/client/home/pages/FinancialDashboard/components/` (新建组件结构)
 - **组件位置**: `src/client/home/pages/FinancialDashboard/components/` (新建组件结构)
@@ -124,6 +169,8 @@ Draft
 ## Change Log
 ## Change Log
 | Date | Version | Description | Author |
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
 |------|---------|-------------|---------|
+| 2025-11-14 | 1.3 | 重写主页面组件任务,细化基础组件实现要求 | Bob (Scrum Master) |
+| 2025-11-14 | 1.2 | 基于战略部署主页面Figma设计文档更新组件规范和任务列表 | Bob (Scrum Master) |
 | 2025-11-14 | 1.1 | 添加严格的1920*1080分辨率要求 | Bob (Scrum Master) |
 | 2025-11-14 | 1.1 | 添加严格的1920*1080分辨率要求 | Bob (Scrum Master) |
 | 2025-11-14 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
 | 2025-11-14 | 1.0 | 初始故事创建 | Bob (Scrum Master) |