feat(plan-calendar): replace day dots with informative banners#79
Merged
Conversation
Each occurrence renders a full-width banner showing the rule name plus a compact amount (e.g. ¥2,500 / ¥1.2万) tinted by the category's chart-N token. Clicking a banner opens the existing edit dialog directly; the day-detail popover still opens by clicking the empty area of a cell or the +N overflow row. Adds formatAmountCompact for legible banner amounts (万 suffix past 10,000 yuan) and covers it plus the new interaction wiring with additional unit tests.
- Gate the gridcell onKeyDown on e.target === e.currentTarget so Enter/Space on a focused banner only opens the edit dialog and no longer also opens the day-detail popover. Mouse clicks already stopPropagation; the keyboard path needed an explicit guard because React's synthetic keydown still bubbles through stopPropagation()'d click handlers. - Render the category color as a left accent stripe over a neutral muted background instead of using the chart-N token as the banner background. White-on-chart-N was below WCAG AA at 10px in both light and dark themes (chart-6 ~ 1.98, chart-20 ~ 2.01 light; chart-6 ~ 1.71, chart-20 ~ 1.62 dark). The neutral surface + theme foreground tokens inherit the project's verified contrast. - Add two keyboard-interaction tests: banner Enter/Space only fires onOpenRule (not onSelectDay); cell-level Enter still opens the day detail.
Amount was rendered with text-muted-foreground on bg-muted/70, which measures ~4.01:1 in light theme and ~3.93:1 in dark — below the 4.5:1 floor 10px text needs. The amount is core information (not a hint), so it gets the same foreground token as the rule name.
nocoo
force-pushed
the
agent/sde-02/8adba4e5
branch
from
fcf97b1 to
577061d
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
资金计划日历页面把每天的小圆点改造成更明显的彩色信息条 banner，每条显示规则名 + 紧凑金额，颜色用分类的
chart-Ntoken。点击 banner 直接打开既有编辑弹窗；当日条目超过 3 条用+N折叠，点击或点单元格空白处仍弹出DayDetailPopover。视觉做了两轮 review 调整：banner 改成「彩色 3px 左条 +
bg-muted/70中性底 +text-foreground文本」，所有颜色都走主题 token，light/dark 都满足 WCAG AA。键盘聚焦 banner 后按 Enter/Space 只触发编辑，不会同时打开 day-detail（通过e.target === e.currentTarget守卫）。Closes STU-524.
Changes
src/components/plan/plan-calendar.tsx— dots → banners，cell 改为min-h-[7rem]flex 列；新增onOpenRulepropsrc/app/plan/calendar/calendar-client.tsx— wireonOpenRule到 edit dialog（沿用既有RecurringExpenseForm）src/lib/recurring-expense/format.ts— 新增formatAmountCompact（≥10000 用「万」）formatAmountCompact单测Test plan
bun run typecheckbun run lintbun run test（957/957）bun run dev在/plan/calendar验证 banner 颜色、点击编辑、+N 折叠（合并前由人验证）