fix(nav): use reference theme sprite icons for header wallet tiles

The top-nav user card rendered its balance and points tiles with Font Awesome
glyphs (fa-money-bill-wave, fa-coins) while the reference theme paints the
multi-tone SVGs money-color-2 and points-color, so the two tiles read as flat
monochrome next to the rest of the card.

aksrt_header_user_wallet_mini() now resolves both value icons through
aksrt_icon_markup(), which is the same call the user-center sidebar uses for
the same two figures, so the header and the sidebar cannot drift apart:

  余额  fa-money-bill-wave -> zibsvg-money-color-2 (em14)
  积分  fa-coins          -> zibsvg-points-color  (em14)

The tile arrows stay on fa-angle-right because that is what the reference
renders there; only the two value icons were wrong. The muted-box geometry, the
c-blue-2 / c-yellow value colours and the data-aksrt-* live-update hooks are
untouched.

Verification: node --test across widget-system, navigation, admin,
asset-ledger, dev, front-submit and fixtures (621 tests), plus php -l. Rendered
the tile through a stubbed harness and diffed it against the reference markup:
identical structure, classes and icon. Contract-locked the two keys in
tests/navigation/legacy-navigation-contract.test.cjs and added a cross-surface
parity assertion to the sidebar icon contract.
This commit is contained in:
kate522 committed 2026-10-18 13:05:19 +08:00
1 parent 4b18f7ef2c
commit 319ec2f47f
3 files changed
+27 -5

No files matched your search

+4 -2
View File
@@ -137,6 +137,8 @@ if (!function_exists('aksrt_header_user_wallet_mini')) :
$center = function_exists('aksrt_get_user_center_url') ? aksrt_get_user_center_url('credits') : '#';
$box = '';
$balance_icon = aksrt_icon_markup('zibsvg-money-color-2', 'em14');
$points_icon = aksrt_icon_markup('zibsvg-points-color', 'em14');
if ($balance_on) {
$box .= '<a rel="nofollow" style="flex: 1;" class="muted-box padding-6 flex1 radius4" href="' . esc_url($center) . '">'
@@ -144,7 +146,7 @@ if (!function_exists('aksrt_header_user_wallet_mini')) :
. '<i class="ml6 fa fas fa-angle-right em12" aria-hidden="true"></i></div>'
. '<div class="flex jsb"><span class="font-bold c-blue-2" data-aksrt-wallet-value data-aksrt-count-format="cut-count">'
. esc_html(aksrt_cut_count((float) aksrt_user_balance_decimal($user_id)))
. '</span><i class="fa fas fa-money-bill-wave em14 c-blue-2" aria-hidden="true"></i></div></a>';
. '</span>' . $balance_icon . '</div></a>';
}
if ($points_on) {
@@ -154,7 +156,7 @@ if (!function_exists('aksrt_header_user_wallet_mini')) :
. '<i class="ml6 fa fas fa-angle-right em12" aria-hidden="true"></i></div>'
. '<div class="flex jsb"><span class="font-bold c-yellow" data-aksrt-points-value data-aksrt-count-format="cut-count">'
. esc_html(aksrt_cut_count(aksrt_user_points($user_id)))
. '</span><i class="fa fas fa-coins em14 c-yellow" aria-hidden="true"></i></div></a>';
. '</span>' . $points_icon . '</div></a>';
}
return '<div class="flex ab jsb col-ml6">' . $box . '</div>';
@@ -246,13 +246,18 @@ test('the account popover rows match the reference user box structure', () => {
assert.match(header, /admin\.php\?page=aksrt_pay/);
assert.match(header, /支付中心/);
// Wallet tiles: balance first, muted-box geometry, FA5 icons.
// Wallet tiles: balance first, muted-box geometry, reference sprite icons.
assert.match(header, /class="flex ab jsb col-ml6"/);
assert.match(header, /muted-box padding-6 flex1 radius4/);
assert.match(header, /font-bold c-blue-2/);
assert.match(header, /font-bold c-yellow/);
assert.match(header, /fa fas fa-money-bill-wave em14 c-blue-2/);
assert.match(header, /fa fas fa-coins em14 c-yellow/);
assert.match(header, /aksrt_icon_markup\('zibsvg-money-color-2', 'em14'\)/);
assert.match(header, /aksrt_icon_markup\('zibsvg-points-color', 'em14'\)/);
// The value icons are the reference theme's multi-tone SVGs, not FA5 glyphs;
// the tile arrow stays on fa-angle-right exactly as the reference renders it.
assert.doesNotMatch(header, /fa fas fa-money-bill-wave/);
assert.doesNotMatch(header, /fa fas fa-coins/);
assert.match(header, /fa fas fa-angle-right em12/);
// Message icon uses the reference markup.
assert.match(header, /msg-news-icon abs-right/);
@@ -115,3 +115,18 @@ test('所用 sprite key 均在前端 sprite 中定义', () => {
assert.match(sprite, new RegExp(`aksrt_svgs\\['${key}'\\]\\s*=`), `sprite key missing: ${key}`);
}
});
test('导航栏用户浮层的余额/积分磁贴与侧栏使用同一组 sprite key', () => {
const nav = read(sidebarDir + 'sidebar-commerce.php');
const wallet = read('inc/helpers/aksrt-header-userbox.php');
assert.match(wallet, /aksrt_icon_markup\('zibsvg-money-color-2', 'em14'\)/);
assert.match(wallet, /aksrt_icon_markup\('zibsvg-points-color', 'em14'\)/);
assert.match(nav, /aksrt_icon_markup\('zibsvg-money-color-2'\)/);
assert.match(nav, /aksrt_icon_markup\('zibsvg-points-color'\)/);
// 磁贴箭头沿用参考主题的 fa-angle-right,不做多余替换。
assert.match(wallet, /fa fas fa-angle-right em12/);
assert.doesNotMatch(wallet, /fa fas fa-money-bill-wave/);
assert.doesNotMatch(wallet, /fa fas fa-coins/);
});