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:
kate522 committed 2026-10-18 12:55:30 +08:00
1 parent 1461c9fe27
commit 4b18f7ef2c
7 files changed
+179 -97

No files matched your search

+19 -66
View File
@@ -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);
}
@@ -15,7 +15,8 @@ require __DIR__ . '/sidebar-vip.php';
require __DIR__ . '/sidebar-commerce.php';
require __DIR__ . '/sidebar-creator.php';
require __DIR__ . '/sidebar-nav.php';
$drawer_trigger_icon = aksrt_icon_markup('zibsvg-menu');
?>
<button type="button" class="uc-sidebar__drawer-trigger" id="uc-drawer-trigger" aria-label="<?php esc_attr_e('打开导航', 'aksrt'); ?>">
<i class="fa fas fa-th-large" aria-hidden="true"></i>
<?php echo $drawer_trigger_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</button>
@@ -20,23 +20,26 @@ try {
$wallet = '0.00';
}
$points = max(0, (int) ($credit_balance ?? 0));
$wallet_icon = aksrt_icon_markup('zibsvg-money-color-2');
$points_icon = aksrt_icon_markup('zibsvg-points-color');
$arrow_icon = aksrt_icon_markup('zibsvg-right');
?>
<div class="uc-sidebar__pair uc-sidebar__pair--assets">
<?php if ($show_wallet) : ?>
<a class="uc-summary-card uc-summary-card--wallet" href="<?php echo esc_url($assets_url); ?>" data-tab="credits">
<span class="uc-summary-card__head"><?php esc_html_e('账户余额', 'aksrt'); ?><i class="fa fas fa-angle-right" aria-hidden="true"></i></span>
<span class="uc-summary-card__head"><?php esc_html_e('账户余额', 'aksrt'); ?><?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<span class="uc-summary-card__body">
<strong data-aksrt-wallet-value><?php echo esc_html($wallet); ?></strong>
<i class="fa fas fa-money-bill" aria-hidden="true"></i>
<?php echo $wallet_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
</a>
<?php endif; ?>
<?php if ($show_credits) : ?>
<a class="uc-summary-card uc-summary-card--points" href="<?php echo esc_url($assets_url); ?>" data-tab="credits">
<span class="uc-summary-card__head"><?php echo esc_html((string) ($currency_name ?? __('积分', 'aksrt'))); ?><i class="fa fas fa-angle-right" aria-hidden="true"></i></span>
<span class="uc-summary-card__head"><?php echo esc_html((string) ($currency_name ?? __('积分', 'aksrt'))); ?><?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<span class="uc-summary-card__body">
<strong data-aksrt-points-value data-credits-value><?php echo esc_html(aksrt_format_points($points)); ?></strong>
<i class="fa fas fa-money-bill" aria-hidden="true"></i>
<?php echo $points_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
</a>
<?php endif; ?>
@@ -13,20 +13,23 @@ $revenue_url = isset($dashboard_tabs['revenue']) ? aksrt_get_user_center_tab_url
if ($creation_url === '' && $revenue_url === '') {
return;
}
$creation_icon = aksrt_icon_markup('zibsvg-merchant-color');
$revenue_icon = aksrt_icon_markup('zibsvg-money-color');
$arrow_icon = aksrt_icon_markup('zibsvg-right');
?>
<div class="uc-sidebar__pair uc-sidebar__pair--centers">
<?php if ($creation_url !== '') : ?>
<a class="uc-center-card uc-center-card--creation" href="<?php echo esc_url($creation_url); ?>" data-tab="creator">
<span class="uc-center-card__icon"><i class="fa fas fa-pen" aria-hidden="true"></i></span>
<span class="uc-center-card__icon"><?php echo $creation_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<span><strong><?php esc_html_e('创作收益', 'aksrt'); ?></strong><small><?php esc_html_e('作者收益明细', 'aksrt'); ?></small></span>
<i class="fa fas fa-angle-right" aria-hidden="true"></i>
<?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>
<?php endif; ?>
<?php if ($revenue_url !== '') : ?>
<a class="uc-center-card uc-center-card--revenue" href="<?php echo esc_url($revenue_url); ?>" data-tab="revenue">
<span class="uc-center-card__icon"><i class="fa fas fa-chart-line" aria-hidden="true"></i></span>
<span class="uc-center-card__icon"><?php echo $revenue_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<span><strong><?php esc_html_e('推广收益', 'aksrt'); ?></strong><small><?php esc_html_e('推广佣金明细', 'aksrt'); ?></small></span>
<i class="fa fas fa-angle-right" aria-hidden="true"></i>
<?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>
<?php endif; ?>
</div>
@@ -2,6 +2,9 @@
/**
* User center sidebar: services and account settings.
*
* Icon set mirrors the reference theme user-center sidebar: every entry renders
* an inline SVG from the theme sprite through aksrt_icon_markup().
*
* @package AKSRT
*/
@@ -17,22 +20,20 @@ $orders_url = $orders_available ? (string) ($orders_url ?? '') : '';
$services = array_values(array_filter([
[
'label' => __('我的等级', 'aksrt'),
'icon' => 'chart-line',
'tone' => 'level',
'icon' => 'trend-color',
'url' => $level_url,
'tab' => 'level',
],
[
'label' => __('官方认证', 'aksrt'),
'icon' => 'id-badge',
'tone' => 'auth',
'icon' => 'user-auth',
'url' => $auth_url,
'tab' => 'auth',
],
[
'label' => __('我的订单', 'aksrt'),
'icon' => 'receipt',
'tone' => 'orders',
'icon' => 'order-color',
'url' => $orders_url,
'tab' => 'orders',
],
@@ -41,35 +42,38 @@ $services = array_values(array_filter([
$settings = array_values(array_filter([
[
'label' => __('消息通知', 'aksrt'),
'icon' => 'bell',
'tone' => 'notice',
'icon' => 'msg-color',
'url' => isset($dashboard_tabs['msg']) ? aksrt_get_user_center_tab_url('msg') : '',
'tab' => 'msg',
],
[
'label' => __('个人资料', 'aksrt'),
'icon' => 'user-edit',
'tone' => 'profile',
'icon' => 'user-color',
'url' => isset($dashboard_tabs['profile']) ? aksrt_get_user_center_tab_url('profile') : '',
'tab' => 'profile',
],
[
'label' => __('账户安全', 'aksrt'),
'icon' => 'shield-alt',
'tone' => 'security',
'icon' => 'security-color',
'url' => isset($dashboard_tabs['settings']) ? aksrt_get_user_center_tab_url('settings') : '',
'tab' => 'settings',
],
], static fn(array $item): bool => (string) $item['url'] !== ''));
$render_grid = static function (array $items): void {
?>
<div class="uc-service-grid">
<?php foreach ($items as $item) : ?>
<a class="uc-service-grid__item uc-service-grid__item--<?php echo esc_attr((string) $item['tone']); ?><?php echo !empty($item['tab']) && ($active_tab ?? '') === $item['tab'] ? ' is-active' : ''; ?>" href="<?php echo esc_url((string) $item['url']); ?>"<?php if (!empty($item['tab'])) : ?> data-tab="<?php echo esc_attr((string) $item['tab']); ?>"<?php endif; ?>>
<span class="uc-service-grid__icon">
<i class="fa fas fa-<?php echo esc_attr((string) $item['icon']); ?>" aria-hidden="true"></i>
<?php if (!empty($item['count'])) : ?><small><?php echo esc_html((string) $item['count']); ?></small><?php endif; ?>
</span>
<span><?php echo esc_html((string) $item['label']); ?></span>
<div class="flex ac hh text-center icon-but-box user-icon-but-box">
<?php foreach ($items as $item) :
$tab = (string) ($item['tab'] ?? '');
$item_class = 'icon-but-' . ($tab !== '' ? $tab : 'item');
if (($active_tab ?? '') === $tab) {
$item_class .= ' is-active';
}
$icon_html = aksrt_icon_markup('zibsvg-' . (string) $item['icon']);
?>
<a class="<?php echo esc_attr($item_class); ?>" href="<?php echo esc_url((string) $item['url']); ?>"<?php if ($tab !== '') : ?> data-tab="<?php echo esc_attr($tab); ?>"<?php endif; ?>>
<div class="em16"><?php echo $icon_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
<div class="px12 muted-color mt3"><?php echo esc_html((string) $item['label']); ?></div>
</a>
<?php endforeach; ?>
</div>
@@ -49,7 +49,8 @@ $sidebar_level = $vip_level > 0 ? $vip_level : $expired_level;
$sidebar_icon_url = esc_url((string) ($vip_levels[$sidebar_level]['img_icon'] ?? ''));
$sidebar_icon = $sidebar_icon_url !== ''
? '<img' . aksrt_get_lazy_attr('lazy_other', $sidebar_icon_url, 'aksrt-vip-level-icon') . ' alt="" decoding="async">'
: '<i class="fa fas fa-certificate" aria-hidden="true"></i>';
: aksrt_icon_markup('zibsvg-vip_1');
$sidebar_arrow = aksrt_icon_markup('zibsvg-right', 'uc-sidebar-vip__arrow');
?>
<a class="uc-sidebar-vip" href="<?php echo esc_url($vip_url); ?>" data-tab="vip">
<span class="uc-sidebar-vip__icon"><?php echo $sidebar_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
@@ -57,5 +58,5 @@ $sidebar_icon = $sidebar_icon_url !== ''
<strong><?php echo esc_html($title); ?></strong>
<small><?php echo esc_html($status); ?></small>
</span>
<i class="fa fas fa-angle-right uc-sidebar-vip__arrow" aria-hidden="true"></i>
<?php echo $sidebar_arrow; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>
@@ -0,0 +1,117 @@
/**
* 用户中心左侧栏图标契约(参考主题 1:1 对齐)。
*
* 硬约束:
* 1) 「我的服务 / 功能设置」两个网格使用参考主题的 icon-but-box / user-icon-but-box
* 外壳,图标全部来自主题内置 SVG sprite(aksrt_icon_markup('zibsvg-*')),
* 不再出现 Font Awesome 字形。
* 2) 侧栏其余部件(余额/积分卡、创作/推广卡、VIP 入口、抽屉触发器)同样只使用
* sprite 图标,箭头统一为 zibsvg-right,保证侧栏只剩一种图标族。
* 3) 旧的 uc-service-grid 外壳、色调底色与计数角标必须已彻底移除,不得残留。
*/
'use strict';
const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');
const test = require('node:test');
const root = path.resolve(__dirname, '..', '..');
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
const sidebarDir = 'inc/helpers/user-center-renderers/';
const sidebarFiles = [
'sidebar-nav.php',
'sidebar-commerce.php',
'sidebar-creator.php',
'sidebar-vip.php',
'profile-sidebar.php',
];
test('服务/设置网格使用参考主题 icon-but-box 外壳与 sprite 图标', () => {
const nav = read(sidebarDir + 'sidebar-nav.php');
assert.match(nav, /class="flex ac hh text-center icon-but-box user-icon-but-box"/);
assert.match(nav, /<div class="em16"><\?php echo \$icon_html;/);
assert.match(nav, /<div class="px12 muted-color mt3">/);
assert.match(nav, /aksrt_icon_markup\('zibsvg-' \. \(string\) \$item\['icon'\]\)/);
// 参考主题选型:我的服务 = trend-color / user-auth / order-color。
assert.match(nav, /'icon'\s+=>\s+'trend-color'/);
assert.match(nav, /'icon'\s+=>\s+'user-auth'/);
assert.match(nav, /'icon'\s+=>\s+'order-color'/);
// 功能设置 = msg-color / user-color / security-color。
assert.match(nav, /'icon'\s+=>\s+'msg-color'/);
assert.match(nav, /'icon'\s+=>\s+'user-color'/);
assert.match(nav, /'icon'\s+=>\s+'security-color'/);
// 每项都带 tab,保证 icon-but-* 类名完整且选中态可同步。
for (const tab of ['level', 'auth', 'orders', 'msg', 'profile', 'settings']) {
assert.match(nav, new RegExp(`'tab'\\s+=>\\s+'${tab}'`), `missing tab key: ${tab}`);
}
// AKSRT 的跳转契约保留 <a href> + data-tab,不搬参考主题的 <item data-onclick>。
assert.match(nav, /<a class="<\?php echo esc_attr\(\$item_class\);/);
assert.match(nav, /data-tab="<\?php echo esc_attr\(\$tab\); \?>/);
assert.doesNotMatch(nav, /data-onclick/);
});
test('侧栏五个部件均不再出现 Font Awesome 字形', () => {
for (const file of sidebarFiles) {
const source = read(sidebarDir + file);
assert.doesNotMatch(source, /fa\s+fas\s+fa-/, `${file} still renders a Font Awesome glyph`);
assert.doesNotMatch(source, /<i class="fa/, `${file} still renders a Font Awesome <i>`);
}
});
test('其余侧栏部件按参考主题选型替换为 sprite 图标', () => {
const commerce = read(sidebarDir + 'sidebar-commerce.php');
assert.match(commerce, /aksrt_icon_markup\('zibsvg-money-color-2'\)/);
assert.match(commerce, /aksrt_icon_markup\('zibsvg-points-color'\)/);
assert.match(commerce, /aksrt_icon_markup\('zibsvg-right'\)/);
const creator = read(sidebarDir + 'sidebar-creator.php');
assert.match(creator, /aksrt_icon_markup\('zibsvg-merchant-color'\)/);
assert.match(creator, /aksrt_icon_markup\('zibsvg-money-color'\)/);
assert.match(creator, /aksrt_icon_markup\('zibsvg-right'\)/);
const vip = read(sidebarDir + 'sidebar-vip.php');
assert.match(vip, /aksrt_icon_markup\('zibsvg-vip_1'\)/);
assert.match(vip, /aksrt_icon_markup\('zibsvg-right', 'uc-sidebar-vip__arrow'\)/);
const profile = read(sidebarDir + 'profile-sidebar.php');
assert.match(profile, /aksrt_icon_markup\('zibsvg-menu'\)/);
});
test('旧 uc-service-grid 外壳与色调底色已彻底移除', () => {
const shell = read('assets/css/routes/user-center/shell.css');
assert.doesNotMatch(shell, /uc-service-grid/);
for (const file of sidebarFiles) {
assert.doesNotMatch(read(sidebarDir + file), /uc-service-grid/);
}
// 计数角标与 tone 键随色调 CSS 一并成为死代码。
assert.doesNotMatch(shell, /uc-service-grid__icon small/);
assert.doesNotMatch(read(sidebarDir + 'sidebar-nav.php'), /\$item\['count'\]/);
assert.doesNotMatch(read(sidebarDir + 'sidebar-nav.php'), /'tone'/);
// 参考主题网格尺寸落地。
assert.match(shell, /\.user-icon-but-box > a \{[^}]*width: calc\(25% - 10px\)/s);
assert.match(shell, /\.user-icon-but-box > a \{[^}]*min-width: 50px/s);
assert.match(shell, /\.user-icon-but-box > a\.is-active/);
// 卡片上的 <i> 已换成 <svg>,元素选择器需覆盖两者。
assert.match(shell, /\.uc-summary-card__body > svg/);
assert.match(shell, /\.uc-center-card > svg/);
});
test('所用 sprite key 均在前端 sprite 中定义', () => {
const sprite = read('assets/js/runtime/svg-icon.js');
const keys = [
'trend-color', 'user-auth', 'order-color', 'msg-color', 'user-color', 'security-color',
'money-color-2', 'points-color', 'merchant-color', 'money-color', 'vip_1', 'menu', 'right',
];
for (const key of keys) {
assert.match(sprite, new RegExp(`aksrt_svgs\\['${key}'\\]\\s*=`), `sprite key missing: ${key}`);
}
});