feat: 个人中心账户摘要区重构、主题色调对齐电商
【账户摘要区重构】 - 新增 profile-page__account-summary 双列网格布局(主信息 + 右侧指标) - 主信息区(account-summary-main):显示账号名/任务概览 - 指标区(account-summary-metric):品牌绿色数字展示积分/完成数,左侧分隔线 - 任务概览改为"X 个任务"更自然的表达方式 - 替代旧 upload-card--meta/meta-item 类名体系 【主题色调对齐】 - 个人中心页面背景、侧边栏、卡片统一为电商同款平坦暗色 - 移除 box-shadow 深度阴影,使用 var(--bg-panel)/var(--bg-inset) Token - Tab 切换按钮透明背景,选中态品牌绿边框+浅绿背景 - 统计卡片/简介/Bio/媒体预览卡片统一边框与背景色 - 媒体徽章、分享按钮、头像环去除阴影
This commit is contained in:
@@ -774,25 +774,25 @@ function ProfilePage({
|
|||||||
任务 {tasks.length}
|
任务 {tasks.length}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="profile-page__upload-card profile-page__upload-card--meta">
|
<div className="profile-page__account-summary">
|
||||||
{accountPanel === "credits" ? (
|
{accountPanel === "credits" ? (
|
||||||
<>
|
<>
|
||||||
<span className="profile-page__meta-item">
|
<span className="profile-page__account-summary-main">
|
||||||
<small>当前账号</small>
|
<small>当前账号</small>
|
||||||
<strong>{displayName}</strong>
|
<strong>{displayName}</strong>
|
||||||
</span>
|
</span>
|
||||||
<span className="profile-page__meta-item">
|
<span className="profile-page__account-summary-metric">
|
||||||
<small>积分剩余</small>
|
<small>积分剩余</small>
|
||||||
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
|
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<span className="profile-page__meta-item">
|
<span className="profile-page__account-summary-main">
|
||||||
<small>任务总数</small>
|
<small>任务概览</small>
|
||||||
<strong>{tasks.length}</strong>
|
<strong>{tasks.length} 个任务</strong>
|
||||||
</span>
|
</span>
|
||||||
<span className="profile-page__meta-item">
|
<span className="profile-page__account-summary-metric">
|
||||||
<small>已完成</small>
|
<small>已完成</small>
|
||||||
<strong>{completedTasks.length}</strong>
|
<strong>{completedTasks.length}</strong>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -7017,6 +7017,75 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: stretch;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||||
|
border-radius: 11px;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 62%),
|
||||||
|
rgba(255, 255, 255, 0.022);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-main,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
|
||||||
|
display: grid;
|
||||||
|
min-width: 0;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-main {
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
|
||||||
|
min-width: 86px;
|
||||||
|
justify-items: end;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary small {
|
||||||
|
overflow: hidden;
|
||||||
|
color: rgba(225, 235, 231, 0.52);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary strong {
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--fg);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 850;
|
||||||
|
line-height: 1.25;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric strong {
|
||||||
|
color: var(--accent);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary em {
|
||||||
|
overflow: hidden;
|
||||||
|
color: rgba(225, 235, 231, 0.42);
|
||||||
|
font-size: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 650;
|
||||||
|
line-height: 1.35;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__upload-card--meta {
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__upload-card--meta {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@@ -7526,6 +7595,93 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Profile center: align with the ecommerce generator's flatter dark-green tone. */
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
|
||||||
|
background: var(--bg-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
||||||
|
background: var(--bg-panel);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner.has-image {
|
||||||
|
background-color: var(--bg-panel);
|
||||||
|
background-blend-mode: luminosity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(13, 15, 15, 0.7), rgba(13, 15, 15, 0.88)),
|
||||||
|
linear-gradient(90deg, rgba(13, 15, 15, 0.62), rgba(13, 15, 15, 0.28) 44%, rgba(13, 15, 15, 0.68));
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
|
||||||
|
border-color: var(--border-weak);
|
||||||
|
background: var(--bg-panel);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
|
||||||
|
background: var(--bg-inset);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--fg-soft);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active {
|
||||||
|
border-color: rgba(var(--accent-rgb), 0.42);
|
||||||
|
background: rgba(var(--accent-rgb), 0.12);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
|
||||||
|
border-color: rgba(255, 255, 255, 0.065);
|
||||||
|
background: rgba(255, 255, 255, 0.024);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
|
||||||
|
border-color: rgba(255, 255, 255, 0.065);
|
||||||
|
background: rgba(255, 255, 255, 0.024);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
|
||||||
|
border-color: rgba(var(--accent-rgb), 0.2);
|
||||||
|
background: rgba(var(--accent-rgb), 0.08);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
|
||||||
|
background: rgba(8, 14, 12, 0.78);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar,
|
||||||
|
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Ecommerce generation page: keep its carousel and composer independent from
|
/* Ecommerce generation page: keep its carousel and composer independent from
|
||||||
the community carousel rules that share class names. */
|
the community carousel rules that share class names. */
|
||||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
||||||
|
|||||||
Reference in New Issue
Block a user