fix(user-center): 1:1 port reference sidebar service/settings icon boxes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/css/routes/user-center/shell.css

@@ -605,21 +605,44 @@ 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; }
 
-/* Services / settings grids, ported from the reference theme sidebar:
-   four per row, no tinted tile behind the icon. */
+/* 我的服务 / 功能设置：1:1 参考主题 zib_user_center_page_sidebar_button_1/2()。
+   外壳为 zib-widget padding-6，标题为普通字重的 padding-6 ml3；
+   网格项只继承正文色，参考主题没有 hover / 选中变色。 */
+.uc-sidebar-iconbox.zib-widget {
+  clear: both;
+  background-color: var(--main-bg-color);
+  box-shadow: 0 0 10px var(--main-shadow);
+  border-radius: var(--main-radius);
+  margin-bottom: 8px;
+  color: var(--main-color);
+}
+
 .user-icon-but-box > a {
   width: calc(25% - 10px);
   margin: 5px;
   min-width: 50px;
   max-width: 100px;
-  color: var(--color-ink-3);
-  text-align: center;
+  cursor: pointer;
+  color: inherit;
   text-decoration: none;
 }
 
 .user-icon-but-box > a:hover,
-.user-icon-but-box > a.is-active {
-  color: var(--color-primary);
+.user-icon-but-box > a:focus {
+  color: inherit;
+}
+
+@media (max-width: 767px) {
+  .uc-sidebar-iconbox.zib-widget {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uc-sidebar > .uc-sidebar-iconbox {
+    margin-right: 12px;
+    margin-left: 12px;
+  }
 }
 
 .uc-follow-management__list { display: grid; gap: 10px; margin-top: 16px; }

inc/helpers/user-center-renderers/sidebar-nav.php

@@ -74,9 +74,6 @@ $render_grid = static function (array $items): void {
 		<?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; ?>>
@@ -89,15 +86,15 @@ $render_grid = static function (array $items): void {
 };
 ?>
 <?php if ($services) : ?>
-<div class="uc-sidebar__section">
-	<div class="uc-sidebar__heading"><span><?php esc_html_e('我的服务', 'aksrt'); ?></span></div>
+<div class="uc-sidebar-iconbox zib-widget padding-6 mb10-sm">
+	<div class="padding-6 ml3"><?php esc_html_e('我的服务', 'aksrt'); ?></div>
 	<?php $render_grid($services); ?>
 </div>
 <?php endif; ?>
 
 <?php if ($settings) : ?>
-<div class="uc-sidebar__section">
-	<div class="uc-sidebar__heading"><span><?php esc_html_e('功能设置', 'aksrt'); ?></span></div>
+<div class="uc-sidebar-iconbox zib-widget padding-6">
+	<div class="padding-6 ml3"><?php esc_html_e('功能设置', 'aksrt'); ?></div>
 	<?php $render_grid($settings); ?>
 </div>
 <?php endif; ?>

tests/widget-system/user-center-sidebar-icons-contract.test.cjs

@@ -112,7 +112,18 @@ test('旧 uc-service-grid 外壳与色调底色已彻底移除', () => {
   // 参考主题网格尺寸落地。
   assert.match(shell, /\.user-icon-but-box > a \{[^}]*width: calc\(25% - 10px\)/s);
   assert.match(shell, /\.user-icon-but-box > a \{[^}]*min-width: 50px/s);
-  assert.match(shell, /\.user-icon-but-box > a\.is-active/);
+  // 参考主题网格项没有 hover / 选中变色，只继承正文色。
+  assert.doesNotMatch(shell, /\.user-icon-but-box > a\.is-active/);
+  assert.match(shell, /\.user-icon-but-box > a \{[^}]*color: inherit/s);
+
+  // 外壳与标题 1:1 参考主题 zib-widget padding-6 / padding-6 ml3。
+  const nav = read(sidebarDir + 'sidebar-nav.php');
+  assert.match(nav, /class="uc-sidebar-iconbox zib-widget padding-6 mb10-sm"/);
+  assert.match(nav, /class="uc-sidebar-iconbox zib-widget padding-6"/);
+  assert.match(nav, /<div class="padding-6 ml3"><\?php esc_html_e\('我的服务'/);
+  assert.match(nav, /<div class="padding-6 ml3"><\?php esc_html_e\('功能设置'/);
+  assert.doesNotMatch(nav, /uc-sidebar__heading/);
+  assert.match(shell, /\.uc-sidebar-iconbox\.zib-widget \{/);
 
   // 卡片上的 <i> 已换成 <svg>，元素选择器需覆盖两者。
   assert.match(shell, /\.uc-summary-card__body > svg/);