feat(billing): ?plan= 深链用一句文案指向目标卡,而不是第三层描边
D13 把 URL 高亮改成纯滚动定位后留下一个空档:桌面上三张套餐卡本来就都在 视口内,滚动等于什么都没指。付费转化路径上,用户从「开通年度会员」的链接 进来,看不到任何东西指向那张卡。 产品在「加一行文案 / 维持现状 / 把描边加回来」里选了第一个。 用卡片自己的套餐名,不用序数——手机端 [data-plan-alias="monthly"] 带 order:-1,序数会指错。新增断言锁住这两点(必须有 note、不得出现序数写法)。 测试 3354 不变,fail 仍 31 且与基线逐条一致;/ 仍 Static; 干净构建 CSS gzip 39,724→39,733。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0193vBv6w5MV2cifdTUu9H5P
This commit is contained in:
co-authored by
Claude Opus 5
parent
5edc519db9
commit
c3bcddb652
@@ -488,6 +488,7 @@ page. Three parts now, in reading order:
|
||||
|
||||
- **Structure:** summary line (balance · membership / expiry), then tabs 会员套餐 / 点数包 / 兑换码 / 订单记录.
|
||||
- **Plan card states:** exactly two, and they are mutually exclusive. `.is-current` (当前套餐) draws the `--color-action` border; `.is-recommended` (推荐, the monthly plan) draws the `--color-border-strong` border on the plain canvas. A card that is both takes 当前套餐 — its own action is 续费, not 立即购买 — so borders and fills can never stack. The badge in the card header says the same word. Mobile ordering (月卡 first below 640px) keys off `[data-plan-alias="monthly"]`, i.e. the plan's identity, not its state, so it survives the card becoming the current plan.
|
||||
- **`?plan=` deep link:** names its target in copy, not in a third border layer. A `.membership-plan-note` line above the grid reads 「你从「年度会员」的链接过来的,就在下面。」, and the card takes `ref` / `tabIndex` / `aria-current` for the scroll and focus target only. It names the plan by the card's own title rather than a position: below 640px the monthly card takes `order: -1`, so an ordinal would point at the wrong card. Scrolling alone is not wayfinding here — at desktop widths all three cards are already in view, so a link that only scrolled pointed at nothing.
|
||||
- **Actions:** recommended-plan purchase is `Button` default. Other plan and credit buys use `Button` outline. Cashier still opens with `window.open` in a new tab. Paying copy is 跳转收银台…; pending copy is 等待支付结果. Redeem is an inline form on its tab, not a nested dialog.
|
||||
- **Deep links:** `/?settings=billing&source=…[&plan=…][&tab=…]` open this pane on `/` and are then stripped. `/membership` and `/membership/orders` redirect here. `&plan=` does **not** repaint the card (that used to be a third border plus an outline on top of the two states); it scrolls the card into view and focuses it, and nothing else.
|
||||
- **Waiting:** the summary renders from the in-memory account. Package cards stay empty until `/api/payment/packages` arrives. No spinner, skeleton, or 「正在加载」.
|
||||
|
||||
Reference in New Issue
Block a user