feat(chat): add quota-exhausted banner for guest users

Introduce ChatQuotaExhaustedBanner component that displays a pink gradient
banner with an "Unlock your membership to continue" CTA when a guest user's
free chat quota has been exhausted. The banner is shown in ChatScreen when
isGuest is true, quota has loaded, and the chat state machine's
quotaExceededTrigger has been incremented by a quota guard. Default click
navigates to /subscription, with an optional onUnlock callback for
overrides/tests. Styles align with the existing splash and sidebar VIP
card visual language.
This commit is contained in:
2026-06-16 15:17:44 +08:00
parent 9ffa30cc03
commit dcb6312fa3
8 changed files with 153 additions and 39 deletions
@@ -0,0 +1,50 @@
/* ChatQuotaExhaustedBanner — 游客配额耗尽横幅
* 视觉规格(与设计稿对齐):
* - 粉→品红渐变背景(与 splash gradient 一致)
* - 居中文案 + 渐变 pill 按钮
* - 圆角 + 阴影(与 /sidebar 已有卡片的视觉重量对齐)
*/
.banner {
flex: 0 0 auto;
margin: 0 var(--spacing-lg, 16px) var(--spacing-lg, 16px);
padding: var(--spacing-xl, 24px) var(--spacing-lg, 16px);
border-radius: 24px;
background: linear-gradient(135deg, #f96ade 0%, #f657a0 100%);
text-align: center;
box-shadow: 0 4px 16px rgba(248, 77, 150, 0.25);
}
.text {
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 var(--spacing-lg, 16px);
/* 与 splash 标题的粉色字保持视觉一致(白底渐变叠加层需要白字保证可读性) */
opacity: 0.95;
}
.cta {
width: 100%;
padding: 0.875rem 1.5rem;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
color: #fff;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.cta:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.cta:active {
transform: scale(0.98);
}