[Bug] 首页卡片额度进度条高度被压成 0,只剩百分比数字

Author: haoyubai212Created Sep 17, 2026Updated Sep 17, 2026

现象

首页 Dashboard 各平台卡片(Antigravity / Codex / Cursor / Grok 等)额度数据是正常的:百分比、重置时间、颜色状态都在。但 额度进度条整条不见,只剩文字。

账号页如果条还在,就可以排除「额度没刷出来」。看起来是首页 stacked 布局把条画没了。

首页卡片只剩百分比和重置时间,额度进度条不可见(账号已打码)

环境

  • OS: macOS
  • 主题: 浅色
  • 页面: 首页 Dashboard 卡片

预期

每条额度应是:

  1. 标签 + 百分比
  2. 中间一条进度条
  3. 重置时间

实际

第 2 行进度条完全看不到。标签和百分比之间、百分比和重置时间之间只剩空白。

Codex 的 Credits:4,517.22 这行除外:源码里是 showProgress: false,本来就不画条。5h / Weekly、Antigravity、Cursor 这些该有条的行都没有。

原因(源码)

首页用的是纵向堆叠:

typescript
<div className="mini-quota-row-stacked">
  <div className="mini-quota-header">...</div>
  <div className="mini-progress-track">
    <div className="mini-progress-bar ..." style={{ width: `${progressPercent}%` }} />
  </div>
  <div className="mini-reset-time">...</div>
</div>

DashboardPage.tsx 里 DOM 是有的,百分比 class(high / medium)也生效了,所以数字是绿/橙的。

src/pages/DashboardPage.css 里轨道仍按横向行来写:

css
.mini-progress-track {
  flex: 1;
  height: 3px;
  background: var(--bg-tertiary);
}

flex: 1 = flex-basis: 0%。在 .mini-quota-row-stackedflex-direction: column、高度 auto)里,主轴是高度,轨道会被算成 0 高height: 3px 被盖掉。

同一套 .mini-progress-track { flex: 1 } 在横向 .mini-quota-row 里是对的(长宽),搬到 stacked 列布局就塌了。

建议修复

只改 stacked 布局,别动横向行:

css
.mini-quota-row-stacked .mini-progress-track {
  flex: none;
  align-self: stretch;
  height: 4px;
  margin: 4px 0 0;
}

3px + gap: 0 就算高度修好了也偏细,stacked 下给一点高度和间距更容易看见。

补充

仓库里暂时没找到同类 issue。#1211、#1528、#1530、#1560 说的是额度数据/周额度展示,不是这条「条在 DOM 里但高度为 0」。