From 613b8a57a303eec4561f1d79fae5ffe8ae92985f Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Tue, 6 Oct 2026 09:41:11 +0800
Subject: [PATCH] =?UTF-8?q?style(user-center):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E5=8F=B7=E8=84=B1=E6=95=8F=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E6=A1=86=E4=B8=8E=E5=89=8D=E7=BC=80=E5=90=8E=E7=BC=80=E4=B8=80?=
 =?UTF-8?q?=E4=BD=93=E5=91=88=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/routes/user-center/settings.css    | 34 +++++++++++++------
 .../settings-account.php                      |  8 +++--
 .../account-settings-contract.test.cjs        |  7 +++-
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/assets/css/routes/user-center/settings.css b/assets/css/routes/user-center/settings.css
index 9a4d1087..9dafdad8 100644
--- a/assets/css/routes/user-center/settings.css
+++ b/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;
-  margin-bottom: 10px;
+  gap: 6px;
+  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;
-  height: 52px;
+  width: 44px;
+  height: 50px;
   padding: 0;
-  border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.12));
-  border-radius: 8px;
-  background: transparent;
+  border: 1.5px solid var(--muted-3-color, #c9d1d9);
+  border-radius: 10px;
+  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);
 }
 
diff --git a/inc/helpers/user-center-renderers/settings-account.php b/inc/helpers/user-center-renderers/settings-account.php
index fdad2225..7382009d 100644
--- a/inc/helpers/user-center-renderers/settings-account.php
+++ b/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) : ?>
-							<p class="muted-2-color"><?php printf(esc_html__('为确认是您本人操作，请补全绑定手机号 %s 中缺失的数字', 'aksrt'), '<br><span class="badg">' . esc_html($account_phone_display) . '</span>'); ?></p>
-						<?php else : ?>
+							<?php if ($phone_mask !== null) : ?>
+								<p class="muted-2-color"><?php esc_html_e('为确认是您本人操作，请补全绑定手机号', 'aksrt'); ?></p>
+							<?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; ?>
diff --git a/tests/widget-system/account-settings-contract.test.cjs b/tests/widget-system/account-settings-contract.test.cjs
index d3169a6b..c22c85a4 100644
--- a/tests/widget-system/account-settings-contract.test.cjs
+++ b/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"/);