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
@@ -4308,6 +4308,12 @@ button.nav-rail-identity:hover { background: var(--sidebar-accent); }
|
||||
borders and backgrounds can never stack the way the three old BEM modifiers
|
||||
(recommended / current / URL highlight) did. Plan order on mobile is keyed off the
|
||||
plan identity below, not off a state, so it survives the card becoming 当前套餐. */
|
||||
.membership-plan-note {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-caption);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.membership-plan-card.is-recommended { border-color: var(--color-border-strong); background: var(--color-canvas); }
|
||||
.membership-plan-card.is-current { border-color: var(--color-action); }
|
||||
.membership-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
||||
|
||||
@@ -62,6 +62,11 @@ export function BillingPanel({ account: seedAccount, highlightedPlan, initialTab
|
||||
setRedeemMessage,
|
||||
} = billing;
|
||||
const plans = selectMembershipPlans(paymentPackages);
|
||||
/* Named by the card's own title, not by position: on phones the monthly card
|
||||
takes `order: -1`, so an ordinal would point at the wrong card. */
|
||||
const highlightedName = highlightedPlan
|
||||
? plans.find((product) => planAlias(product) === highlightedPlan)?.name ?? null
|
||||
: null;
|
||||
const creditPacks = paymentPackages.filter((product) => product.productType === "credit_pack");
|
||||
const credits = account?.credits ?? seedAccount.credits;
|
||||
|
||||
@@ -119,6 +124,13 @@ export function BillingPanel({ account: seedAccount, highlightedPlan, initialTab
|
||||
|
||||
<TabsContent className="membership-panel" value="membership">
|
||||
{packagesSettled && !packagesError && !paymentEnabled && <p className="membership-empty">在线支付暂未开放。</p>}
|
||||
{/* A ?plan= deep link no longer tints or outlines the card it points at
|
||||
(D13: one card, one state). On desktop all three cards are visible
|
||||
anyway, so scrolling alone pointed at nothing — this line is the
|
||||
wayfinding, in copy instead of a third border layer. */}
|
||||
{highlightedName && (
|
||||
<p className="membership-plan-note">你从「{highlightedName}」的链接过来的,就在下面。</p>
|
||||
)}
|
||||
{plans.length > 0 && (
|
||||
<div className="membership-plan-grid">
|
||||
{plans.map((product) => {
|
||||
|
||||
Reference in New Issue
Block a user