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
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user