1
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
This commit is contained in:
SunCheng
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-02-17
|
||||
@@ -0,0 +1,28 @@
|
||||
## Context
|
||||
|
||||
统计页图表基于 `chart.js` + `vue-chartjs` 渲染，目前存在饼图扇区直接绘制分类文字、仪表盘包含颠倒文字与多余数字的问题。需要在不改变数据含义的前提下，优化文字展示规则与仪表盘弧度范围，让关键信息更清晰。
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- 移除饼图扇区直接文本绘制，保留清晰的分类信息呈现方式。
|
||||
- 仪表盘仅显示“已用/预算/余额”三项核心信息，去除颠倒与冗余文字。
|
||||
- 仪表盘弧形从半圆略微加大，增强视觉完整度但不改变指标含义。
|
||||
|
||||
**Non-Goals:**
|
||||
- 不调整数据计算逻辑与接口返回结构。
|
||||
- 不变更其他统计图表的主题或配色体系。
|
||||
|
||||
## Decisions
|
||||
|
||||
- 关闭饼图扇区文本绘制插件或数据标签绘制逻辑，分类名称改为列表/图例承载（现有列表区域保留）。
|
||||
- 备选：将标签外置引线。未选原因：当前空间有限且易与小扇区重叠。
|
||||
- 仪表盘中心区域仅保留三项文本，统一排布与字号层级，移除额外数字绘制。
|
||||
- 备选：保留次要刻度文本。未选原因：当前视觉干扰与颠倒问题更明显。
|
||||
- 调整仪表盘弧度参数（如 `circumference` / `rotation`）使弧形超过 180°，但不封闭成全圆。
|
||||
- 备选：改为全圆。未选原因：与“预算进度”语义不匹配。
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- [标签信息依赖列表/图例] → 确保列表/图例在移动端默认可见。
|
||||
- [弧度调整影响布局] → 保持容器尺寸与中心文本布局自适应，避免遮挡。
|
||||
@@ -0,0 +1,23 @@
|
||||
## Why
|
||||
|
||||
当前统计页图表存在视觉干扰：饼图直接叠加分类名称，半圆仪表盘出现颠倒文字与多余数字，影响可读性与数据理解，需要尽快修复以保证核心统计信息清晰。
|
||||
|
||||
## What Changes
|
||||
|
||||
- 饼图不再在扇区上直接展示分类名称，避免文字遮挡与视觉噪音。
|
||||
- 半圆仪表盘移除颠倒文字与多余数字，仅展示“已用/预算/余额”三项核心信息。
|
||||
- 仪表盘弧形从半圆略微加大（更接近圆弧），利用空白区域提升视觉完整度。
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `chart-detail-fix`: 统计图表细节显示修复（饼图标签与仪表盘信息展示规范）。
|
||||
|
||||
### Modified Capabilities
|
||||
- `pie-chart-label-positioning`: 调整饼图标签显示规则，禁止直接叠加在扇区上。
|
||||
- `budget-gauge-display`: 调整仪表盘显示内容与弧度范围。
|
||||
|
||||
## Impact
|
||||
|
||||
- 前端：`Web/src/components/Charts/` 与统计页相关视图、Chart.js 配置
|
||||
- 依赖：`chart.js` 与 `vue-chartjs` 现有配置方式
|
||||
@@ -0,0 +1,45 @@
|
||||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: 仪表图容器布局
|
||||
预算仪表图 SHALL 在容器内正确居中显示，无错位。
|
||||
|
||||
#### Scenario: 垂直居中展示
|
||||
- **WHEN** 用户查看预算页面的仪表图
|
||||
- **THEN** 仪表图 SHALL 在容器内垂直居中
|
||||
- **AND** SHALL 在容器内水平居中
|
||||
- **AND** 与上下其他元素 SHALL 保持适当间距（16px）
|
||||
|
||||
#### Scenario: 响应式布局
|
||||
- **WHEN** 用户在不同屏幕尺寸下查看仪表图
|
||||
- **THEN** 仪表图 SHALL 保持居中不偏移
|
||||
- **AND** 容器高度 SHALL 自适应确保图表完整显示
|
||||
|
||||
### Requirement: 页面错误处理
|
||||
预算页面 SHALL 正确加载并显示仪表图，无运行时错误。
|
||||
|
||||
#### Scenario: 正常加载
|
||||
- **WHEN** 用户访问预算页面
|
||||
- **THEN** 页面 SHALL 无 JavaScript 错误
|
||||
- **AND** 仪表图 SHALL 正常渲染
|
||||
- **AND** 所有交互功能 SHALL 正常工作
|
||||
|
||||
#### Scenario: 错误边界处理
|
||||
- **WHEN** 仪表图组件发生异常
|
||||
- **THEN** 系统 SHALL 捕获错误并显示友好提示
|
||||
- **AND** SHALL 不阻塞页面其他功能
|
||||
|
||||
### Requirement: 仪表盘信息展示约束
|
||||
预算仪表盘 SHALL 仅展示已用、预算、余额三项核心信息，且不出现颠倒文字或额外数字。
|
||||
|
||||
#### Scenario: 仅展示核心信息
|
||||
- **WHEN** 系统渲染预算仪表盘
|
||||
- **THEN** 仪表盘中心区域 SHALL 仅显示已用、预算、余额
|
||||
- **AND** SHALL 不出现颠倒文字或额外数字
|
||||
|
||||
### Requirement: 仪表盘弧度范围
|
||||
预算仪表盘弧形 SHALL 略大于半圆但不形成全圆。
|
||||
|
||||
#### Scenario: 弧度扩展显示
|
||||
- **WHEN** 系统渲染预算仪表盘
|
||||
- **THEN** 仪表盘弧形 SHALL 超过 180°
|
||||
- **AND** SHALL 保持非全圆形态
|
||||
@@ -0,0 +1,25 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 饼图不直接显示扇区文字
|
||||
系统 SHALL 禁止在饼图扇区内直接绘制分类名称文字。
|
||||
|
||||
#### Scenario: 默认不显示扇区文字
|
||||
- **WHEN** 系统渲染支出分类饼图
|
||||
- **THEN** 扇区内 SHALL 不绘制分类名称文字
|
||||
- **AND** 分类信息 SHALL 通过列表或图例展示
|
||||
|
||||
### Requirement: 仪表盘仅展示三项核心信息
|
||||
预算仪表盘 SHALL 仅展示已用、预算、余额三项核心信息，且文字方向正确。
|
||||
|
||||
#### Scenario: 移除多余与颠倒文本
|
||||
- **WHEN** 系统渲染预算仪表盘
|
||||
- **THEN** 仪表盘中心区域 SHALL 仅显示已用、预算、余额
|
||||
- **AND** SHALL 不出现颠倒文字或额外数字
|
||||
|
||||
### Requirement: 仪表盘弧度略大于半圆
|
||||
预算仪表盘的弧形范围 SHALL 略大于半圆但不形成全圆。
|
||||
|
||||
#### Scenario: 弧度扩展显示
|
||||
- **WHEN** 系统渲染预算仪表盘
|
||||
- **THEN** 仪表盘弧形 SHALL 超过 180°
|
||||
- **AND** SHALL 保持非全圆形态
|
||||
@@ -0,0 +1,24 @@
|
||||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: 分类标签智能定位
|
||||
饼图的分类标签 SHALL 避免与图标重叠，并清晰展示分类名称。
|
||||
|
||||
#### Scenario: 标签位置优化
|
||||
- **WHEN** 系统渲染支出分类饼图
|
||||
- **THEN** 分类标签 SHALL 显示在饼图扇区外侧
|
||||
- **AND** 标签 SHALL 通过引导线与对应扇区连接
|
||||
- **AND** 标签文字 SHALL 显示分类名称而非仅在图标上叠加
|
||||
|
||||
#### Scenario: 避免标签重叠
|
||||
- **WHEN** 多个分类扇区相邻且较小时
|
||||
- **THEN** 系统 SHALL 自动调整标签位置避免相互重叠
|
||||
- **AND** 当空间不足时 SHALL 使用图例(legend)代替直接标签
|
||||
|
||||
### Requirement: 图标与标签分离
|
||||
分类图标和分类名称 SHALL 分开展示，不互相遮挡。
|
||||
|
||||
#### Scenario: 清晰的视觉层次
|
||||
- **WHEN** 用户查看饼图
|
||||
- **THEN** 分类图标 SHALL 显示在饼图扇区内部或作为图例图标
|
||||
- **AND** 分类名称 SHALL 显示在标签位置而非图标上
|
||||
- **AND** 两者 SHALL 不重叠遮挡
|
||||
@@ -0,0 +1,16 @@
|
||||
## 1. 饼图标签展示调整
|
||||
|
||||
- [x] 1.1 定位饼图扇区标签绘制逻辑（Chart.js dataLabels/自定义插件）
|
||||
- [x] 1.2 关闭扇区内分类名称绘制，改为外侧引导线展示
|
||||
- [x] 1.3 验证小扇区场景下不出现重叠文字（已实现防碰撞算法）
|
||||
|
||||
## 2. 仪表盘信息与弧度优化
|
||||
|
||||
- [x] 2.1 定位预算仪表盘中心文本渲染逻辑
|
||||
- [x] 2.2 移除颠倒与多余数字，仅保留已用/预算/余额
|
||||
- [x] 2.3 调整仪表盘弧度参数，确保略大于半圆且非全圆
|
||||
|
||||
## 3. 视觉与回归验证
|
||||
|
||||
- [x] 3.1 校验移动端布局与居中展示无错位
|
||||
- [x] 3.2 在统计页验证列表/图例信息可见性（引导线+外侧标签）
|
||||
Reference in New Issue
Block a user