kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kate522
2026-10-06 09:41:11 +08:00
parent af72364078
commit 613b8a57a3
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center/settings.css
+24 -10
View File
@@ -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);
}
inc/helpers/user-center-renderers/settings-account.php
+5 -3
View File
@@ -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; ?>
tests/widget-system/account-settings-contract.test.cjs
+6 -1
View File
@@ -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"/);