fix(user-center): replicate reference theme sidebar icons via SVG sprite
The user-center sidebar rendered Font Awesome glyphs while the reference theme paints multi-tone inline SVGs, and several glyphs were simply wrong for their slot: fa-chart-line served both 我的等级 and 推广收益, fa-money-bill served both 余额 and 积分, and fa-pen stood in for 创作收益. The theme already ships every sprite key the reference sidebar needs in assets/js/runtime/svg-icon.js, and main.min.js injects the <symbol id="icon-*"> set on every frontend page, so no new icon system was needed. The two grids now use the reference theme's icon-but-box / user-icon-but-box shell (four per row, em16 icon, 12px muted label) in place of AKSRT's tinted 38px pill, and every remaining sidebar glyph and arrow resolves through aksrt_icon_markup(): 我的服务 我的等级 trend-color, 官方认证 user-auth, 我的订单 order-color 功能设置 消息通知 msg-color, 个人资料 user-color, 账户安全 security-color 资产卡 余额 money-color-2, 积分 points-color 中心卡 创作收益 merchant-color, 推广收益 money-color 其它 VIP 入口 vip_1, 抽屉触发器 menu, 箭头统一 right Dead code went with the swap: the whole .uc-service-grid block including the unused --cart and --revenue tones, the count badge (no caller ever set count), and the tone key. The two card selectors that targeted <i> now also cover <svg> so the icon sizes survive the element change, and the VIP arrow keeps uc-sidebar-vip__arrow for its hover animation. level/profile/settings gained their missing tab keys, which completes the icon-but-* class names and lets the existing .is-active sync cover all six entries. Verification: node --test across widget-system, navigation, admin, asset-ledger, dev, front-submit and fixtures (620 tests), plus php -l on the five changed PHP files. Contract-locked in tests/widget-system/user-center-sidebar-icons-contract.test.cjs.
This commit is contained in:
1 parent
1461c9fe27
commit
4b18f7ef2c
7 files changed
+179
-97
No files matched your search
@@ -622,25 +622,6 @@ body.aksrt-user-center .uc-content,
|
||||
}
|
||||
}
|
||||
|
||||
.uc-service-grid__icon small {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -7px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
padding: 0 4px;
|
||||
border: 2px solid var(--surface-1);
|
||||
border-radius: 99px;
|
||||
background: var(--color-error, #ef4444);
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uc-sidebar__pair {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -684,7 +665,8 @@ body.aksrt-user-center .uc-content,
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.uc-summary-card__body > i {
|
||||
.uc-summary-card__body > i,
|
||||
.uc-summary-card__body > svg {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -716,14 +698,26 @@ body.aksrt-user-center .uc-content,
|
||||
|
||||
.uc-center-card strong { font-size: 13px; }
|
||||
.uc-center-card small { margin-top: 3px; color: var(--color-ink-4); font-size: 10px; }
|
||||
.uc-center-card > i { color: var(--color-ink-4); font-size: 11px; }
|
||||
.uc-center-card > i,
|
||||
.uc-center-card > svg { color: var(--color-ink-4); font-size: 11px; }
|
||||
.uc-center-card--creation .uc-center-card__icon { color: #6650c7; background: rgba(124, 92, 220, 0.12); }
|
||||
.uc-center-card--revenue .uc-center-card__icon { color: #ce6b35; background: rgba(234, 112, 55, 0.12); }
|
||||
|
||||
.uc-service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
/* Services / settings grids, ported from the reference theme sidebar:
|
||||
four per row, no tinted tile behind the icon. */
|
||||
.user-icon-but-box > a {
|
||||
width: calc(25% - 10px);
|
||||
margin: 5px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
color: var(--color-ink-3);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.user-icon-but-box > a:hover,
|
||||
.user-icon-but-box > a.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.uc-follow-management__list { display: grid; gap: 10px; margin-top: 16px; }
|
||||
@@ -735,44 +729,3 @@ body.aksrt-user-center .uc-content,
|
||||
.uc-follow-management__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
|
||||
@media (max-width: 560px) { .uc-follow-management__item { align-items: flex-start; flex-wrap: wrap; } .uc-follow-management__actions { width: 100%; margin-left: 60px; } }
|
||||
|
||||
.uc-service-grid__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
padding: 4px 2px;
|
||||
color: var(--color-ink-3);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.uc-service-grid__icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 14px;
|
||||
background: var(--surface-2);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uc-service-grid__item--cart .uc-service-grid__icon { color: #dd6941; background: rgba(238, 109, 61, 0.12); }
|
||||
.uc-service-grid__item--level .uc-service-grid__icon { color: #9b6b0a; background: rgba(234, 179, 8, 0.13); }
|
||||
.uc-service-grid__item--revenue .uc-service-grid__icon { color: #b8377d; background: rgba(219, 39, 119, 0.12); }
|
||||
.uc-service-grid__item--auth .uc-service-grid__icon { color: #287bc4; background: rgba(14, 165, 233, 0.12); }
|
||||
.uc-service-grid__item--orders .uc-service-grid__icon { color: #c05621; background: rgba(234, 88, 12, 0.12); }
|
||||
.uc-service-grid__item--notice .uc-service-grid__icon { color: #d04b65; background: rgba(244, 63, 94, 0.11); }
|
||||
.uc-service-grid__item--profile .uc-service-grid__icon { color: #6550c7; background: rgba(124, 92, 220, 0.12); }
|
||||
.uc-service-grid__item--security .uc-service-grid__icon { color: #16816c; background: rgba(16, 185, 129, 0.12); }
|
||||
|
||||
.uc-service-grid__item:hover,
|
||||
.uc-service-grid__item.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.uc-service-grid__item.is-active .uc-service-grid__icon {
|
||||
box-shadow: 0 0 0 2px var(--color-primary-soft), 0 5px 14px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
Reference in new issue
Block a user