From c152e0050132b883598b5779d893badbfd9cc55b Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 28 Oct 2026 22:48:54 +0800 Subject: [PATCH] fix(user-center): 1:1 port reference sidebar statistics row and icon box line-height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Rewrite sidebar stats as a single zib-widget row (user-statistics-item, em14 / em09 opacity5 mt6), drop legacy .uc-stats styles - Restore reference body line-height (1.42857143) on stats and service/settings boxes - Move 我的订单 to the front of 我的服务 to match reference order Co-Authored-By: Claude Fable 5 --- assets/css/routes/user-center/responsive.css | 12 -- assets/css/routes/user-center/shell.css | 126 +++++------------- .../user-center-renderers/sidebar-nav.php | 14 +- .../user-center-renderers/sidebar-stats.php | 14 +- ...ser-center-sidebar-icons-contract.test.cjs | 11 ++ 5 files changed, 53 insertions(+), 124 deletions(-) diff --git a/assets/css/routes/user-center/responsive.css b/assets/css/routes/user-center/responsive.css index e1add844..92d60af0 100644 --- a/assets/css/routes/user-center/responsive.css +++ b/assets/css/routes/user-center/responsive.css @@ -216,18 +216,6 @@ padding: 0 12px 32px; } - .uc-stats { - grid-template-columns: repeat(4, 1fr); - } - - .uc-stats__item { - padding: 8px 4px; - } - - .uc-stats__value { - font-size: 1rem; - } - .uc-content .dashboard-panel { padding: 14px; } diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index 9445d840..714170d0 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -193,44 +193,6 @@ body.aksrt-user-center .uc-content, border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,0.06)); } -/* 数据统计 */ -.uc-stats { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; -} - -.uc-stats__item { - display: flex; - flex-direction: column; - align-items: center; - padding: 12px 6px; - border-radius: 8px; - background: var(--surface-2); - text-decoration: none; - transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; -} - -.uc-stats__item:hover { - background: var(--color-primary-soft); - transform: none; - box-shadow: 0 4px 8px rgba(0,0,0,0.06); -} - -.uc-stats__value { - font-size: 1.25rem; - font-weight: 700; - color: var(--color-primary); - line-height: 1.2; - font-variant-numeric: tabular-nums; -} - -.uc-stats__label { - font-size: 11px; - color: var(--color-ink-4); - margin-top: 3px; -} - /* 侧栏按钮组 */ .uc-sidebar__buttons { display: flex; @@ -427,72 +389,41 @@ body.aksrt-user-center .uc-content, } -/* ==================== 侧栏账户仪表盘 ==================== */ -.uc-sidebar__section--stats { - padding: 8px 10px; +/* 文章 / 评论 / 收藏 / 粉丝：1:1 参考主题 zib_user_center_page_sidebar_statistics()。 + 参考主题没有给 .user-statistics-item 写专门样式，外观全部来自 zib-widget padding-10 + 与 em14 / em09 opacity5 mt6；链接只继承正文色，无 hover 变色。 */ +.uc-sidebar-statistics.zib-widget { + clear: both; + line-height: 1.42857143; + background-color: var(--main-bg-color); + box-shadow: 0 0 10px var(--main-shadow); + border-radius: var(--main-radius); + color: var(--main-color); } -.uc-sidebar__heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 14px; - color: var(--color-ink, #172033); - font-size: 14px; - font-weight: 700; +/* 侧栏 gap:12px 与 mb20 叠加会翻倍，扣掉 gap 后与参考间距一致。 */ +.uc-sidebar > .uc-sidebar-statistics.mb20 { + margin-bottom: 8px; } -.uc-sidebar__heading > a { - display: inline-flex; - align-items: center; - gap: 5px; - color: var(--color-ink-4); - font-size: 12px; - font-weight: 500; +.uc-sidebar-statistics > .user-statistics-item, +.uc-sidebar-statistics > .user-statistics-item:hover, +.uc-sidebar-statistics > .user-statistics-item:focus { + color: inherit; text-decoration: none; } -.uc-sidebar__heading > a:hover { - color: var(--color-primary); +@media (max-width: 767px) { + .uc-sidebar > .uc-sidebar-statistics.mb20 { + margin-bottom: 0; + } } -.uc-stats { - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 0; -} - -.uc-stats__item { - position: relative; - gap: 2px; - padding: 8px 2px; - background: transparent; -} - -.uc-stats__item + .uc-stats__item::before { - content: ''; - position: absolute; - top: 12px; - bottom: 12px; - left: 0; - width: 1px; - background: var(--color-line-soft, rgba(15, 23, 42, 0.07)); -} - -.uc-stats__item:hover { - background: var(--surface-2); - box-shadow: none; -} - -.uc-stats__value { - color: var(--color-ink, #172033); - font-size: 17px; - letter-spacing: -0.02em; -} - -.uc-stats__label { - margin: 0; - font-size: 11px; +@media (max-width: 991.98px) { + .uc-sidebar > .uc-sidebar-statistics { + margin-right: 12px; + margin-left: 12px; + } } /* VIP 入口：1:1 参考主题 zib_user_center_page_sidebar_vip()，外观全部来自 @@ -607,9 +538,12 @@ body.aksrt-user-center .uc-content, /* 我的服务 / 功能设置：1:1 参考主题 zib_user_center_page_sidebar_button_1/2()。 外壳为 zib-widget padding-6，标题为普通字重的 padding-6 ml3； - 网格项只继承正文色，参考主题没有 hover / 选中变色。 */ + 网格项只继承正文色，参考主题没有 hover / 选中变色。 + 参考主题正文行高是 bootstrap 的 1.42857143，本站 body 为 1.6， + 标题、图标、文字三行会各自被撑高，这里恢复参考行高。 */ .uc-sidebar-iconbox.zib-widget { clear: both; + line-height: 1.42857143; background-color: var(--main-bg-color); box-shadow: 0 0 10px var(--main-shadow); border-radius: var(--main-radius); diff --git a/inc/helpers/user-center-renderers/sidebar-nav.php b/inc/helpers/user-center-renderers/sidebar-nav.php index 40180ccd..74e1a9ea 100644 --- a/inc/helpers/user-center-renderers/sidebar-nav.php +++ b/inc/helpers/user-center-renderers/sidebar-nav.php @@ -19,26 +19,26 @@ $orders_url = $orders_available ? (string) ($orders_url ?? '') : ''; $tickets_available = isset($dashboard_tabs['tickets']); $tickets_url = $tickets_available ? aksrt_get_user_center_tab_url('tickets') : ''; +// 参考主题由 zibpay 把「我的订单」前插到按钮组最前，其后才是等级 / 认证。 $services = array_values(array_filter([ + [ + 'label' => __('我的订单', 'aksrt'), + 'icon' => 'order-color', + 'url' => $orders_url, + 'tab' => 'orders', + ], [ 'label' => __('我的等级', 'aksrt'), 'icon' => 'trend-color', 'url' => $level_url, 'tab' => 'level', ], - [ 'label' => __('官方认证', 'aksrt'), 'icon' => 'user-auth', 'url' => $auth_url, 'tab' => 'auth', ], - [ - 'label' => __('我的订单', 'aksrt'), - 'icon' => 'order-color', - 'url' => $orders_url, - 'tab' => 'orders', - ], [ 'label' => __('工单中心', 'aksrt'), 'icon' => 'manual-service', diff --git a/inc/helpers/user-center-renderers/sidebar-stats.php b/inc/helpers/user-center-renderers/sidebar-stats.php index a1897372..574d4fc0 100644 --- a/inc/helpers/user-center-renderers/sidebar-stats.php +++ b/inc/helpers/user-center-renderers/sidebar-stats.php @@ -34,13 +34,9 @@ $stats = [ ], ]; ?> -
-
- - data-tab=""> - - - - -
+ +
+ + data-tab="">
 +
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 73ac2145..4a43c566 100644 --- a/tests/widget-system/user-center-sidebar-icons-contract.test.cjs +++ b/tests/widget-system/user-center-sidebar-icons-contract.test.cjs @@ -131,6 +131,17 @@ test('旧 uc-service-grid 外壳与色调底色已彻底移除', () => { assert.doesNotMatch(shell, /uc-center-card/); assert.doesNotMatch(shell, /uc-sidebar-vip__/); assert.match(shell, /\.uc-sidebar-centers > \.zib-widget/); + + // 文章/评论/收藏/粉丝统计 1:1 参考主题 zib_user_center_page_sidebar_statistics()。 + const stats = read(sidebarDir + 'sidebar-stats.php'); + assert.match(stats, /mb10-sm mb20 flex ac jsa zib-widget padding-10 text-center/); + assert.match(stats, /<\?php echo esc_html\(aksrt_cut_count\(/); + assert.match(stats, /
/); + assert.doesNotMatch(stats, /uc-stats|uc-sidebar__section/); + assert.doesNotMatch(shell, /\.uc-stats/); + assert.doesNotMatch(read('assets/css/routes/user-center/responsive.css'), /\.uc-stats/); + assert.match(shell, /\.uc-sidebar-statistics\.zib-widget \{/); }); test('所用 sprite key 均在前端 sprite 中定义', () => {