admin
e44cc7e2f3
Replace the dark sidebar theme with a light-themed three-state UI
matching the design references:
- guest : pink "login" pill in user row, no status pill on VIP card,
"Activate VIP Membership" button shown
- member : "VIP membership not activated" subtitle, no status pill,
"Activate VIP Membership" button shown
- vip : pink "VIP Member" pill with diamond icon, "Activated" pill
in VIP card header, no Activate button
Decompose into BackBar, UserHeader, VipBenefitsCard, and VoicePackageCard
under src/app/sidebar/components/. Delete obsolete GuestPanel,
UserInfoCard, and VipCta.
Lift VIP_BENEFITS to a shared src/data/constants/vip-benefits.ts so the
sidebar and subscription page render identical benefit copy.
Add five sidebar tokens (--color-card-surface, --color-voice-gradient-*
--border-card, --shadow-card, --color-pill-bg) to src/tokens/colors.css.
Includes barrelsby regeneration for src/app/sidebar/components and
side-effect barrel updates under src/stores/{auth,chat,sidebar,user},
plus package-lock.json from npm install (required for lint/typecheck).
Co-Authored-By: Claude <noreply@anthropic.com>
131 lines
2.5 KiB
CSS
131 lines
2.5 KiB
CSS
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md, 12px);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.avatar {
|
|
flex: 0 0 auto;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent, #f84d96);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.avatarImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.avatarIcon {
|
|
color: inherit;
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.name {
|
|
margin: 0;
|
|
font-size: var(--font-size-lg, 16px);
|
|
font-weight: 600;
|
|
color: #000000;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 0;
|
|
font-size: var(--font-size-sm, 12px);
|
|
color: var(--color-text-secondary, #9e9e9e);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* "VIP Member" 粉色 pill（含小钻石图标） */
|
|
.vipMemberPill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs, 4px);
|
|
align-self: flex-start;
|
|
padding: 3px var(--spacing-sm, 8px);
|
|
border-radius: var(--radius-full, 999px);
|
|
background: var(--color-pill-bg, rgba(248, 77, 150, 0.10));
|
|
color: var(--color-accent, #f84d96);
|
|
font-size: var(--font-size-xs, 10px);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
.diamondIcon {
|
|
color: var(--color-accent, #f84d96);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* guest 状态下的 "login" 粉色胶囊按钮 */
|
|
.loginPill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 6px var(--spacing-lg, 16px);
|
|
border-radius: var(--radius-full, 999px);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-button-gradient-start, #ff67e0),
|
|
var(--color-button-gradient-end, #ff52a2)
|
|
);
|
|
color: var(--color-text-primary, #ffffff);
|
|
font-size: var(--font-size-sm, 12px);
|
|
font-weight: 600;
|
|
border: 0;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.loginPill:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.loginPill:focus-visible {
|
|
outline: 2px solid var(--color-accent, #f84d96);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 骨架占位（isLoading 时显示）
|
|
* ============================================================ */
|
|
.skeleton {
|
|
display: block;
|
|
background: var(--color-dark-gray, #e5e5e5);
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
.skeletonMd {
|
|
width: 60%;
|
|
height: 18px;
|
|
}
|
|
|
|
.skeletonSm {
|
|
width: 80%;
|
|
height: 14px;
|
|
}
|
|
|
|
.skeletonXs {
|
|
width: 40%;
|
|
height: 14px;
|
|
}
|