OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 个人中心账户摘要区重构、主题色调对齐电商

Browse Source 
【账户摘要区重构】
- 新增 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:
ludan
2026-06-04 18:06:43 +08:00
parent 2b65206b84
commit 6d68ab02bb
2 changed files with 163 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/themes/dark-green.css
+156
View File
@@ -7017,6 +7017,75 @@
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 {
grid-template-columns: 1fr;
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
the community carousel rules that share class names. */
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {