style(user-center): 优化手机号脱敏数字框与前缀后缀一体呈现

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

@@ -716,38 +716,52 @@
 .aksrt-settings-modal .code-send-btn.is-counting { pointer-events: none; opacity: .6; }
 .aksrt-settings-modal .aksrt-captcha-wrap { margin: 12px 0 8px; }
 
-/* 修改手机：脱敏中间位数字框 */
+/* 修改手机：脱敏中间位数字框，与前缀/后缀号码一体呈现 */
 .aksrt-settings-modal .aksrt-phone-digits {
   display: flex;
+  align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 6px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+}
+
+.aksrt-settings-modal .aksrt-phone-digit__edge {
+  padding: 0 2px;
+  color: var(--color-ink, #333);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 1px;
+  white-space: nowrap;
 }
 
 .aksrt-settings-modal .aksrt-phone-digit {
-  width: 48px;
+  width: 44px;
-  height: 52px;
+  height: 50px;
   padding: 0;
-  border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.12));
+  border: 1.5px solid var(--muted-3-color, #c9d1d9);
-  border-radius: 8px;
+  border-radius: 10px;
-  background: transparent;
+  background-color: var(--main-bg-color, #f7f8fa);
   color: var(--color-ink, #333);
   font-size: 22px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
   caret-color: var(--color-primary, #2a7de1);
+  font-variant-numeric: tabular-nums;
   outline: none;
-  transition: border-color .15s ease, box-shadow .15s ease;
+  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
 }
 
 .aksrt-settings-modal .aksrt-phone-digit:focus {
   border-color: var(--color-primary, #2a7de1);
-  box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.15);
+  background-color: var(--main-bg-color, #fff);
+  box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.18);
 }
 
 .aksrt-settings-modal .aksrt-phone-digits.has-error .aksrt-phone-digit {
   border-color: var(--color-danger, #e02020);
+  background-color: rgba(224, 32, 32, 0.06);
   box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.12);
 }
 

inc/helpers/user-center-renderers/settings-account.php

@@ -149,17 +149,19 @@ $render_phone_form = static function () use ($agreement): void {
 				<div class="account-step-panels">
 					<div class="account-step is-active" data-account-step="phone-old">
 						<?php $phone_mask = function_exists('aksrt_phone_mask_parts') ? aksrt_phone_mask_parts($account_phone) : null; ?>
-						<?php if ($phone_mask !== null) : ?>
+							<?php if ($phone_mask !== null) : ?>
-							<p class="muted-2-color"><?php printf(esc_html__('为确认是您本人操作，请补全绑定手机号 %s 中缺失的数字', 'aksrt'), '<br><span class="badg">' . esc_html($account_phone_display) . '</span>'); ?></p>
+								<p class="muted-2-color"><?php esc_html_e('为确认是您本人操作，请补全绑定手机号', 'aksrt'); ?></p>
-						<?php else : ?>
+							<?php else : ?>
 							<p class="muted-2-color"><?php printf(esc_html__('请在下方获取验证码以验证您的老手机号 %s', 'aksrt'), '<br><span class="badg">' . esc_html($account_phone_display) . '</span>'); ?></p>
 						<?php endif; ?>
 						<form id="phone-old-verify-form" novalidate>
 							<?php if ($phone_mask !== null) : ?>
 								<div class="mb20 aksrt-phone-digits" data-aksrt-phone-digits data-hidden-length="<?php echo esc_attr((string) $phone_mask['hidden_length']); ?>" role="group" aria-label="<?php esc_attr_e('请补全手机号中缺失的数字', 'aksrt'); ?>">
+									<span class="aksrt-phone-digit__edge"><?php echo esc_html(($phone_mask['leading_plus'] ? '+' : '') . (string) $phone_mask['prefix']); ?></span>
 									<?php for ($phone_digit_index = 0; $phone_digit_index < (int) $phone_mask['hidden_length']; $phone_digit_index++) : ?>
 										<input type="text" class="aksrt-phone-digit" inputmode="numeric" maxlength="1" autocomplete="one-time-code" data-digit-index="<?php echo esc_attr((string) $phone_digit_index); ?>" aria-label="<?php echo esc_attr(sprintf(__('手机号第 %d 位数字', 'aksrt'), 4 + $phone_digit_index)); ?>">
 									<?php endfor; ?>
+									<span class="aksrt-phone-digit__edge"><?php echo esc_html((string) $phone_mask['suffix']); ?></span>
 								</div>
 								<p class="aksrt-phone-digits__error" data-aksrt-phone-digits-error hidden></p>
 							<?php endif; ?>

tests/widget-system/account-settings-contract.test.cjs

@@ -27,7 +27,10 @@ test('account dialogs expose configured email steps, phone steps, and reference
   assert.match(template, /<i class="fa far fa-envelope"/);
   assert.match(template, /\$account_phone_display = function_exists\('aksrt_phone_mask_display'\) \? aksrt_phone_mask_display\(\$account_phone\) : \$account_phone;/);
   assert.match(template, /\$account_phone !== '' \? \$account_phone_display : __\('暂未绑定'/);
-  assert.match(template, /<span class="badg">' \. esc_html\(\$account_phone_display\)/);
+  assert.doesNotMatch(template, /为确认是您本人操作，请补全绑定手机号 %s/);
+  assert.match(template, /为确认是您本人操作，请补全绑定手机号/);
+  assert.match(template, /class="aksrt-phone-digit__edge"><\?php echo esc_html\(\(\$phone_mask\['leading_plus'\] \? '\+' : ''\) \. \(string\) \$phone_mask\['prefix'\]\); \?><\/span>/);
+  assert.match(template, /<span class="aksrt-phone-digit__edge"><\?php echo esc_html\(\(string\) \$phone_mask\['suffix'\]\); \?><\/span>/);
   assert.doesNotMatch(template, /name="phone" value="/);
   assert.match(template, /data-aksrt-phone-digits data-hidden-length/);
   assert.match(template, /class="aksrt-phone-digit" inputmode="numeric" maxlength="1"/);
@@ -39,6 +42,8 @@ test('account dialogs expose configured email steps, phone steps, and reference
   assert.match(javascript, /stage: 'reset_old_phone'/);
   assert.match(javascript, /function initPhoneDigits\(/);
   assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digit \{/);
+  assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digit__edge \{/);
+  assert.match(css, /background-color: var\(--main-bg-color, #f7f8fa\)/);
   assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digits\.has-error \.aksrt-phone-digit \{/);
   assert.match(template, /aksrt_render_captcha\('change_email'\)[\s\S]*?id="email-code"/);
   assert.match(template, /aksrt_render_captcha\('bind_phone'\)[\s\S]*?id="bind-phone-code"/);