From 9fbfab54c226b2e139630fb3b0ec85d9e16059fd Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 28 Oct 2026 22:01:37 +0800 Subject: [PATCH] feat(user-center): 1:1 port reference sidebar VIP bar and creator/promotion cards Co-Authored-By: Claude Fable 5 --- assets/css/routes/user-center/shell.css | 180 ++++-------------- .../user-center-renderers/sidebar-creator.php | 113 +++++++++-- .../user-center-renderers/sidebar-vip.php | 62 +++--- ...ser-center-sidebar-icons-contract.test.cjs | 35 +++- 4 files changed, 190 insertions(+), 200 deletions(-) diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index 0a767a0f..196f9fd1 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -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。这里只补 与侧栏 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 { diff --git a/inc/helpers/user-center-renderers/sidebar-creator.php b/inc/helpers/user-center-renderers/sidebar-creator.php index 209d9e8c..81817908 100644 --- a/inc/helpers/user-center-renderers/sidebar-creator.php +++ b/inc/helpers/user-center-renderers/sidebar-creator.php @@ -1,6 +1,10 @@ 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, + ]; +} ?> -
- - - - - + diff --git a/inc/helpers/user-center-renderers/sidebar-vip.php b/inc/helpers/user-center-renderers/sidebar-vip.php index b38cbd5f..08819ddd 100644 --- a/inc/helpers/user-center-renderers/sidebar-vip.php +++ b/inc/helpers/user-center-renderers/sidebar-vip.php @@ -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 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) : '') + . '' . wp_kses_post($vip_name) . ''; + if ($exp_label !== '') { + $button .= '' + . aksrt_icon_markup('zibsvg-time', 'mr3') + . esc_html($exp_label) . ''; + } +} 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 !== '' - ? '' - : 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' : ''); ?> - - - - - - - + + + diff --git a/tests/widget-system/user-center-sidebar-icons-contract.test.cjs b/tests/widget-system/user-center-sidebar-icons-contract.test.cjs index 4f773aa2..6ce496d2 100644 --- a/tests/widget-system/user-center-sidebar-icons-contract.test.cjs +++ b/tests/widget-system/user-center-sidebar-icons-contract.test.cjs @@ -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, / { // 卡片上的 已换成 ，元素选择器需覆盖两者。 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}`);