kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(user-center): 1:1 port reference sidebar VIP bar and creator/promotion cards

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-10-28 22:01:37 +08:00
1 parent 5dd7d14334
commit 9fbfab54c2
4 files changed
+190 -200
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/routes/user-center/shell.css
+41 -139
View File
@@ -495,141 +495,73 @@ body.aksrt-user-center .uc-content,
font-size: 11px;
}
/* VIP 入口：琥珀会员券，与下方中性资产卡形成主次层级 */
.uc-sidebar .uc-sidebar-vip {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
min-width: 0;
overflow: hidden;
padding: 13px 14px;
border: 1px solid rgba(255, 232, 177, 0.34);
border-radius: var(--main-radius, var(--radius, 8px));
background:
radial-gradient(circle at 88% 12%, rgba(255, 239, 190, 0.2), transparent 34%),
linear-gradient(122deg, #4a2b13 0%, #7c4a1c 48%, #a86d28 100%);
box-shadow: 0 7px 18px rgba(91, 50, 15, 0.18);
color: #fff8e8;
/* VIP 入口：1:1 参考主题 zib_user_center_page_sidebar_vip()，外观全部来自
payvip-icon / badg / btn-block / abs-right。这里只补 <a> 与侧栏 gap 带来的差异。 */
.uc-sidebar .uc-sidebar-vip,
.uc-sidebar .uc-sidebar-vip:hover,
.uc-sidebar .uc-sidebar-vip:focus {
color: #ece0e0;
text-decoration: none;
isolation: isolate;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.uc-sidebar .uc-sidebar-vip::after {
content: '';
position: absolute;
z-index: -1;
top: -80%;
left: 58%;
width: 34px;
height: 260%;
background: linear-gradient(90deg, transparent, rgba(255, 246, 211, 0.14), transparent);
transform: rotate(24deg);
pointer-events: none;
/* 侧栏是 gap:12px 的纵向 flex，mb20 / mb10-sm 再叠加会翻倍，扣掉 gap 后与参考间距一致。 */
.uc-sidebar > .uc-sidebar-vip.mb20 {
margin-bottom: 8px;
}
.uc-sidebar-vip__icon {
display: inline-flex;
place-items: center;
align-items: center;
justify-content: center;
/* legacy-utilities 把 .abs-right 改成 top:0/right:0，恢复参考主题的垂直居中几何。 */
.uc-sidebar-vip > .abs-right {
top: 50%;
right: 0.7em;
transform: translateY(-50%);
}
.uc-sidebar-vip .img-icon {
height: 1em;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #ffd982;
font-size: 16px;
vertical-align: -0.1em;
}
.uc-sidebar-vip__icon .aksrt-vip-level-icon {
width: auto;
height: 1.5em;
max-width: 6em;
object-fit: contain;
vertical-align: middle;
/* 创作中心 / 推广中心：1:1 参考主题 zib_user_center_page_sidebar_income_rebate()。
.zib-widget 在本站不是全局类，在侧栏内按参考原值落地。 */
.uc-sidebar-centers > .zib-widget {
clear: both;
background-color: var(--main-bg-color);
padding: 10px;
box-shadow: 0 0 10px var(--main-shadow);
border-radius: var(--main-radius);
margin-bottom: 8px;
color: var(--main-color);
text-decoration: none;
}
.uc-sidebar-vip__content {
min-width: 0;
.uc-sidebar-centers > .zib-widget:hover,
.uc-sidebar-centers > .zib-widget:focus {
color: var(--main-color);
}
.uc-sidebar-vip__content strong,
.uc-sidebar-vip__content small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uc-sidebar-vip__content strong {
color: #fffaf0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.35;
}
.uc-sidebar-vip__content small {
margin-top: 3px;
color: rgba(255, 244, 216, 0.76);
font-size: 11px;
line-height: 1.35;
}
.uc-sidebar-vip__arrow {
color: rgba(255, 244, 216, 0.72);
font-size: 12px;
transition: transform 0.2s ease, color 0.2s ease;
}
.uc-sidebar .uc-sidebar-vip:hover {
border-color: rgba(255, 235, 180, 0.58);
box-shadow: 0 10px 24px rgba(91, 50, 15, 0.25);
color: #fff8e8;
transform: translateY(-1px);
}
.uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow {
color: #fff4d8;
transform: translateX(2px);
}
.uc-sidebar .uc-sidebar-vip:focus-visible {
outline: 3px solid rgba(244, 180, 67, 0.42);
outline-offset: 2px;
@media (max-width: 767px) {
.uc-sidebar > .uc-sidebar-vip.mb20,
.uc-sidebar-centers > .zib-widget {
margin-bottom: 0;
}
}
@media (max-width: 991.98px) {
.uc-sidebar .uc-sidebar-vip {
.uc-sidebar > .uc-sidebar-vip,
.uc-sidebar > .uc-sidebar-centers {
margin-right: 12px;
margin-left: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.uc-sidebar .uc-sidebar-vip,
.uc-sidebar-vip__arrow {
transition: none;
}
.uc-sidebar .uc-sidebar-vip:hover,
.uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow {
transform: none;
}
}
.uc-sidebar__pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.uc-summary-card,
.uc-center-card {
.uc-summary-card {
min-width: 0;
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06));
border-radius: var(--main-radius, var(--radius, 8px));
@@ -673,36 +605,6 @@ body.aksrt-user-center .uc-content,
.uc-summary-card--wallet .uc-summary-card__body { color: #3978d6; }
.uc-summary-card--points .uc-summary-card__body { color: #ba7a0a; }
.uc-center-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 13px 12px;
}
.uc-center-card__icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 12px;
font-size: 15px;
}
.uc-center-card strong,
.uc-center-card small {
display: block;
white-space: nowrap;
}
.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,
.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); }
/* Services / settings grids, ported from the reference theme sidebar:
four per row, no tinted tile behind the icon. */
.user-icon-but-box > a {
inc/helpers/user-center-renderers/sidebar-creator.php
+95 -18
View File
@@ -1,6 +1,10 @@
<?php
/**
* User center sidebar: creation center card.
* User center sidebar: creator center / promotion center cards.
*
* 1:1 port of the reference theme zib_user_center_page_sidebar_income_rebate():
* two zib-widget cards, each with an icon title row and two centered stats.
* Navigation keeps the AKSRT <a href data-tab> contract instead of the reference click proxy.
*
* @package AKSRT
*/
@@ -13,23 +17,96 @@ $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');
$user_id = (int) ($user_id ?? get_current_user_id());
$centers = [];
if ($creation_url !== '') {
$income_stats = $user_id > 0 && class_exists('\AKSRT\Payment\Revenue')
? (array) (\AKSRT\Payment\Revenue::get_instance()->get_user_income_view($user_id)['stats'] ?? [])
: [];
$today_income = (float) ($income_stats['today']['CNY'] ?? 0);
if ($today_income > 0) {
$income_label = __('今日收入', 'aksrt');
$income_value = aksrt_cut_count($today_income);
} else {
$income_label = __('收入', 'aksrt');
$income_value = aksrt_cut_count((float) ($income_stats['total']['CNY'] ?? 0));
}
// Reference zibpay_get_user_income_post_count(): the author's published paid posts.
$product_count = 0;
if ($user_id > 0) {
$product_query = new WP_Query([
'post_type' => ['post', 'page'],
'post_status' => 'publish',
'author' => $user_id,
'posts_per_page' => 1,
'fields' => 'ids',
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
'meta_query' => [
[
'key' => \AKSRT\Core\DomainModel::PAY_TYPE_KEY,
'value' => \AKSRT\Core\DomainModel::PAY_TYPE_NO,
'compare' => '!=',
],
[
'key' => \AKSRT\Core\DomainModel::PAY_PRICE_KEY,
'value' => 0,
'compare' => '>',
'type' => 'DECIMAL(10,2)',
],
],
]);
$product_count = (int) $product_query->found_posts;
}
$centers[] = [
'url' => $creation_url,
'tab' => 'creator',
'icon' => aksrt_icon_markup('zibsvg-merchant-color', 'mr6'),
'title' => __('创作中心', 'aksrt'),
'first' => aksrt_cut_count($product_count),
'first_l' => __('商品', 'aksrt'),
'second' => $income_value,
'second_l' => $income_label,
];
}
if ($revenue_url !== '') {
$overview = $user_id > 0 && class_exists('\AKSRT\Payment\CommissionLedger')
? \AKSRT\Payment\CommissionLedger::get_instance()->overview($user_id)
: [];
$pool = (float) ($overview['pool'] ?? 0);
if ($pool > 0) {
$rebate_label = __('待提现', 'aksrt');
$rebate_value = aksrt_cut_count($pool);
} else {
$rebate_label = __('累计佣金', 'aksrt');
$rebate_value = aksrt_cut_count((float) ($overview['total'] ?? 0));
}
$rebate_ratio = $user_id > 0 && class_exists('\AKSRT\Settings\Settings')
? max(0, (int) \AKSRT\Settings\Settings::affiliate_ratio_for_user($user_id))
: 0;
$centers[] = [
'url' => $revenue_url,
'tab' => 'revenue',
'icon' => aksrt_icon_markup('zibsvg-money-color', 'mr6'),
'title' => __('推广中心', 'aksrt'),
'first' => $rebate_ratio . '%',
'first_l' => __('比例', 'aksrt'),
'second' => $rebate_value,
'second_l' => $rebate_label,
];
}
?>
<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"><?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>
<?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="uc-sidebar-centers flex ab jsb col-ml6<?php echo $user_id <= 0 ? ' signin-loader' : ''; ?>">
<?php foreach ($centers as $center) : ?>
<a style="flex: 1;" class="mb10-sm zib-widget padding-10 flex1 pointer" href="<?php echo esc_url($center['url']); ?>" data-tab="<?php echo esc_attr($center['tab']); ?>">
<div class="muted-color em09 mb6 flex ac"><div class="overflow-hidden"><div class="text-ellipsis"><?php echo $center['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php echo esc_html($center['title']); ?></div></div><i class="ml6 fa fas fa-angle-right em12" aria-hidden="true"></i></div>
<div class="flex jsa text-center"><div class=""><div class="font-bold em12"><?php echo esc_html($center['first']); ?></div><div class="px12 opacity5"><?php echo esc_html($center['first_l']); ?></div></div><div class="overflow-hidden"><div class="font-bold em12"><?php echo esc_html($center['second']); ?></div><div class="px12 opacity5 text-ellipsis"><?php echo esc_html($center['second_l']); ?></div></div></div>
</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"><?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>
<?php echo $arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
inc/helpers/user-center-renderers/sidebar-vip.php
+28 -34
View File
@@ -2,6 +2,11 @@
/**
* User center sidebar: VIP entry.
*
* 1:1 port of the reference theme zib_user_center_page_sidebar_vip():
* metallic payvip-icon bar, level icon + name + expiry badge for members,
* vip_1 icon + "开通会员 尊享会员权益" otherwise, chevron pinned right.
* Navigation keeps the AKSRT <a href data-tab> contract instead of the reference click proxy.
*
* @package AKSRT
*/
@@ -18,45 +23,34 @@ if (!$vip_enabled) {
$user_id = (int) ($user_id ?? get_current_user_id());
$vip_state = function_exists('aksrt_get_user_vip_state') ? aksrt_get_user_vip_state($user_id) : [];
$vip_level = (int) ($vip_state['level'] ?? 0);
$expired_level = min(2, max(0, (int) ($vip_state['expired_level'] ?? 0)));
$expires = max(0, (int) ($vip_state['expires'] ?? 0));
$vip_url = aksrt_get_user_center_tab_url('vip');
$title = __('开通会员', 'aksrt');
$status = (string) ($vip_settings['desc'] ?? '');
if ($status === '') {
$status = __('尊享会员权益', 'aksrt');
}
if ($vip_level > 0) {
$title = (string) ($vip_levels[$vip_level]['name_html'] ?? $vip_levels[$vip_level]['name'] ?? ('VIP' . $vip_level));
if ($expires <= 0 && ($vip_state['source'] ?? 'none') !== 'order') {
$status = __('永久会员', 'aksrt');
} else {
$remaining_days = max(1, (int) ceil(($expires - time()) / DAY_IN_SECONDS));
$status = sprintf(
/* translators: %d: remaining membership days */
__('还有 %d 天到期', 'aksrt'),
$remaining_days
);
$vip_name = (string) ($vip_levels[$vip_level]['name_html'] ?? $vip_levels[$vip_level]['name'] ?? ('VIP' . $vip_level));
// Same semantics as zib_get_user_vip_exp_date_text(): date / 会员已过期 / 永久会员,
// and no badge at all when there is no expiry data.
$expires = max(0, (int) ($vip_state['expires'] ?? 0));
$exp_label = '';
if ($expires > 0) {
$exp_label = $expires <= time() ? __('会员已过期', 'aksrt') : wp_date('Y年m月d日', $expires);
} elseif (!empty($vip_state['is_permanent'])) {
$exp_label = __('永久会员', 'aksrt');
}
} elseif ($expired_level > 0) {
$title = (string) ($vip_levels[$expired_level]['name_html'] ?? $vip_levels[$expired_level]['name'] ?? ('VIP' . $expired_level));
$status = __('已过期', 'aksrt');
$button = (function_exists('aksrt_get_vip_icon') ? aksrt_get_vip_icon($user_id, 'em12 mr6', false) : '')
. '<span>' . wp_kses_post($vip_name) . '</span>';
if ($exp_label !== '') {
$button .= '<span class="ml10 badg jb-yellow vip-expdate-tag">'
. aksrt_icon_markup('zibsvg-time', 'mr3')
. esc_html($exp_label) . '</span>';
}
} else {
$button = aksrt_icon_markup('zibsvg-vip_1', 'em12 mr6') . esc_html__('开通会员 尊享会员权益', 'aksrt');
}
$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">'
: aksrt_icon_markup('zibsvg-vip_1');
$sidebar_arrow = aksrt_icon_markup('zibsvg-right', 'uc-sidebar-vip__arrow');
$vip_class = 'uc-sidebar-vip mb20 mb10-sm main-radius payvip-icon btn-block badg pointer' . ($user_id <= 0 ? ' signin-loader' : '');
?>
<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>
<span class="uc-sidebar-vip__content">
<strong><?php echo wp_kses_post($title); ?></strong>
<small><?php echo wp_kses_post($status); ?></small>
</span>
<?php echo $sidebar_arrow; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<a class="<?php echo esc_attr($vip_class); ?>" style="padding: 14px 10px;" href="<?php echo esc_url($vip_url); ?>" data-tab="vip">
<?php echo $button; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- parts escaped above. ?>
<i class="fa fas fa-chevron-circle-right abs-right" aria-hidden="true"></i>
</a>
tests/widget-system/user-center-sidebar-icons-contract.test.cjs
+26 -9
View File
@@ -56,8 +56,10 @@ test('服务/设置网格使用参考主题 icon-but-box 外壳与 sprite 图标
assert.doesNotMatch(nav, /data-onclick/);
});
test('侧栏五个部件均不再出现 Font Awesome 字形', () => {
for (const file of sidebarFiles) {
test('侧栏部件（VIP 与创作/推广卡除外）不再出现 Font Awesome 字形', () => {
// VIP 入口与创作/推广卡 1:1 参考主题，箭头沿用 fa-chevron-circle-right / fa-angle-right。
const faAllowed = new Set(['sidebar-vip.php', 'sidebar-creator.php']);
for (const file of sidebarFiles.filter((f) => !faAllowed.has(f))) {
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>`);
@@ -71,13 +73,25 @@ test('其余侧栏部件按参考主题选型替换为 sprite 图标', () => {
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'\)/);
assert.match(creator, /aksrt_icon_markup\('zibsvg-merchant-color', 'mr6'\)/);
assert.match(creator, /aksrt_icon_markup\('zibsvg-money-color', 'mr6'\)/);
assert.match(creator, /class="mb10-sm zib-widget padding-10 flex1 pointer"/);
assert.match(creator, /flex ab jsb col-ml6/);
assert.match(creator, /<i class="ml6 fa fas fa-angle-right em12"/);
for (const label of ['创作中心', '推广中心', '商品', '比例', '今日收入', '收入', '待提现', '累计佣金']) {
assert.ok(creator.includes(`'${label}'`), `creator card missing label: ${label}`);
}
assert.doesNotMatch(creator, /data-onclick/);
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'\)/);
assert.match(vip, /aksrt_icon_markup\('zibsvg-vip_1', 'em12 mr6'\)/);
assert.match(vip, /aksrt_icon_markup\('zibsvg-time', 'mr3'\)/);
assert.match(vip, /mb20 mb10-sm main-radius payvip-icon btn-block badg pointer/);
assert.match(vip, /style="padding: 14px 10px;"/);
assert.match(vip, /fa-chevron-circle-right abs-right/);
assert.match(vip, /开通会员 尊享会员权益/);
assert.match(vip, /data-tab="vip"/);
assert.doesNotMatch(vip, /data-onclick/);
const profile = read(sidebarDir + 'profile-sidebar.php');
assert.match(profile, /aksrt_icon_markup\('zibsvg-menu'\)/);
@@ -102,14 +116,17 @@ test('旧 uc-service-grid 外壳与色调底色已彻底移除', () => {
// 卡片上的 <i> 已换成 <svg>，元素选择器需覆盖两者。
assert.match(shell, /\.uc-summary-card__body > svg/);
assert.match(shell, /\.uc-center-card > svg/);
// 旧的琥珀 VIP 券与 uc-center-card 已被参考主题结构替换。
assert.doesNotMatch(shell, /uc-center-card/);
assert.doesNotMatch(shell, /uc-sidebar-vip__/);
assert.match(shell, /\.uc-sidebar-centers > \.zib-widget/);
});
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',
'money-color-2', 'points-color', 'merchant-color', 'money-color', 'vip_1', 'time', 'menu', 'right',
];
for (const key of keys) {
assert.match(sprite, new RegExp(`aksrt_svgs\\['${key}'\\]\\s*=`), `sprite key missing: ${key}`);