Skip to content

修复:StatCard 数值溢出问题#573

Merged
Wei-Shaw merged 1 commit intoWei-Shaw:mainfrom
wucm667:fix/stat-card-value-overflow
Feb 13, 2026
Merged

修复:StatCard 数值溢出问题#573
Wei-Shaw merged 1 commit intoWei-Shaw:mainfrom
wucm667:fix/stat-card-value-overflow

Conversation

@wucm667
Copy link
Contributor

@wucm667 wucm667 commented Feb 13, 2026

  • 添加 title 属性,鼠标悬停时显示完整数值
  • 添加 truncate 类防止数值溢出
  • 优化长数值的显示效果
    20260213-160353

- 添加 title 属性,鼠标悬停时显示完整数值
- 添加 truncate 类防止数值溢出
- 优化长数值的显示效果
Copilot AI review requested due to automatic review settings February 13, 2026 08:04
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

该 PR 旨在修复 StatCard 在展示超长数值时的溢出问题,通过在 UI 上截断显示并提供悬停查看完整值的方式改善可读性。

Changes:

  • .stat-value 增加 truncate 样式,避免长数值撑破布局
  • StatCard 的数值元素上增加 title 属性,支持 hover 显示完整内容

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
frontend/src/style.css 给统计卡片数值样式增加 truncate 以减少溢出
frontend/src/components/common/StatCard.vue 给数值增加 title tooltip 展示完整值

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.


.stat-value {
@apply text-2xl font-bold text-gray-900 dark:text-white;
@apply text-2xl font-bold text-gray-900 dark:text-white truncate;
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

truncate alone often won’t actually ellipsize inside a flex row because flex items default to min-width: auto (can’t shrink below content). Since .stat-value is rendered as a flex item next to the trend <span>, long values may still overflow instead of truncating. Consider adding min-w-0 (and optionally flex-1 / max-w-full) to .stat-value or to the flex container’s children so truncation reliably works.

Suggested change
@apply text-2xl font-bold text-gray-900 dark:text-white truncate;
@apply text-2xl font-bold text-gray-900 dark:text-white truncate min-w-0 max-w-full;

Copilot uses AI. Check for mistakes.
@Wei-Shaw Wei-Shaw merged commit 4719432 into Wei-Shaw:main Feb 13, 2026
8 of 10 checks passed
@wucm667 wucm667 deleted the fix/stat-card-value-overflow branch February 15, 2026 02:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants