From 6d68ab02bbf150ce493b3d012915a1ef23d68c24 Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Thu, 4 Jun 2026 18:06:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E8=B4=A6=E6=88=B7=E6=91=98=E8=A6=81=E5=8C=BA=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E3=80=81=E4=B8=BB=E9=A2=98=E8=89=B2=E8=B0=83=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E7=94=B5=E5=95=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【账户摘要区重构】 - 新增 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/媒体预览卡片统一边框与背景色 - 媒体徽章、分享按钮、头像环去除阴影 --- src/features/profile/ProfilePage.tsx | 14 +-- src/styles/themes/dark-green.css | 156 +++++++++++++++++++++++++++ 2 files changed, 163 insertions(+), 7 deletions(-) diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx index a89c413..2f3997a 100644 --- a/src/features/profile/ProfilePage.tsx +++ b/src/features/profile/ProfilePage.tsx @@ -774,25 +774,25 @@ function ProfilePage({ 任务 {tasks.length} -
+
{accountPanel === "credits" ? ( <> - + 当前账号 {displayName} - + 积分剩余 {(usage.balanceCents / 100).toFixed(2)} ) : ( <> - - 任务总数 - {tasks.length} + + 任务概览 + {tasks.length} 个任务 - + 已完成 {completedTasks.length} diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css index f50f9d3..bd52151 100644 --- a/src/styles/themes/dark-green.css +++ b/src/styles/themes/dark-green.css @@ -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 {