fix(settings): repair phone binding modal

assets/css/routes/profile/modals.css

@@ -104,6 +104,7 @@
 }
 .modal-field input[type="password"],
 .modal-field input[type="email"],
+.modal-field input[type="tel"],
 .modal-field input[type="text"] {
   display: block;
   width: 100%;

inc/helpers/user-center-renderers/profile-account-modals.php

@@ -97,29 +97,34 @@ extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_
 			</div>
 		</div>
 
-<div id="phone-modal" class="aksrt-modal" hidden>
-	<div class="aksrt-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="phone-modal-title">
+<div id="phone-modal" class="aksrt-modal" hidden role="dialog" aria-modal="true" aria-labelledby="phone-modal-title">
+	<div class="aksrt-modal__overlay" data-close-modal></div>
+	<div class="aksrt-modal__box">
 		<div class="aksrt-modal__header">
-			<h3 id="phone-modal-title"><?php esc_html_e('绑定手机', 'aksrt'); ?></h3>
-			<button type="button" class="aksrt-modal__close" data-modal-close="phone-modal" aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>">&times;</button>
+			<div class="aksrt-modal__title-wrap">
+				<span class="aksrt-modal__icon"><i class="fa fas fa-mobile-alt" aria-hidden="true"></i></span>
+				<h4 id="phone-modal-title"><?php esc_html_e('绑定手机', 'aksrt'); ?></h4>
 			</div>
-		<form id="aksrt-bind-phone-form" class="aksrt-modal__body" data-aksrt-bind-phone-form>
-			<div class="form-field">
+			<button type="button" class="aksrt-modal__close" data-close-modal title="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button>
+		</div>
+		<form id="aksrt-bind-phone-form" autocomplete="off" novalidate data-aksrt-bind-phone-form>
+			<div class="modal-field">
 				<label for="bind-phone-input"><?php esc_html_e('手机号', 'aksrt'); ?></label>
-				<input type="tel" id="bind-phone-input" name="phone" data-aksrt-phone-input maxlength="11" autocomplete="tel" required placeholder="<?php esc_attr_e('请输入手机号', 'aksrt'); ?>">
+				<input type="tel" id="bind-phone-input" name="phone" data-aksrt-phone-input maxlength="11" inputmode="numeric" autocomplete="tel" required placeholder="<?php esc_attr_e('请输入手机号', 'aksrt'); ?>">
 			</div>
-			<div class="form-field form-field--code">
+			<div class="modal-field modal-field--code">
 				<label for="bind-phone-code"><?php esc_html_e('短信验证码', 'aksrt'); ?></label>
-				<div class="input-wrap input-wrap--code">
-					<input type="text" id="bind-phone-code" name="code" maxlength="8" autocomplete="one-time-code" required placeholder="<?php esc_attr_e('请输入验证码', 'aksrt'); ?>">
-					<button type="button" class="btn-secondary btn-sm" data-aksrt-sms-trigger data-aksrt-sms-scene="bind_phone" data-aksrt-sms-phone="#bind-phone-input"><?php esc_html_e('获取验证码', 'aksrt'); ?></button>
+				<div class="code-input-group">
+					<input type="text" id="bind-phone-code" name="code" maxlength="8" inputmode="numeric" autocomplete="one-time-code" required placeholder="<?php esc_attr_e('请输入验证码', 'aksrt'); ?>">
+					<button type="button" class="btn-ghost btn-sm code-send-btn" data-aksrt-sms-trigger data-aksrt-sms-scene="bind_phone" data-aksrt-sms-phone="#bind-phone-input"><?php esc_html_e('获取验证码', 'aksrt'); ?></button>
 				</div>
 			</div>
 			<?php if (function_exists('aksrt_render_captcha')) : ?>
 				<?php aksrt_render_captcha('bind_phone'); ?>
 			<?php endif; ?>
-			<div class="aksrt-modal__actions">
-				<button type="submit" class="btn-primary"><?php esc_html_e('确认绑定', 'aksrt'); ?></button>
+			<div class="aksrt-modal__footer">
+				<button type="button" class="btn-ghost btn-sm" data-close-modal><?php esc_html_e('取消', 'aksrt'); ?></button>
+				<button type="submit" class="btn-primary btn-sm"><?php esc_html_e('确认绑定', 'aksrt'); ?></button>
 			</div>
 		</form>
 	</div>

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

@@ -36,6 +36,7 @@ defined('ABSPATH') || exit;
 			<button type="button" class="btn-primary btn-sm security-trigger" data-modal="email-modal">
 				<?php esc_html_e('更改', 'aksrt'); ?>
 			</button>
+		</div>
 		<div class="security-action-item">
 			<div class="security-action-info">
 				<span class="security-action-icon"><i class="fa fas fa-mobile-alt" aria-hidden="true"></i></span>
@@ -50,4 +51,3 @@ defined('ABSPATH') || exit;
 		</div>
 	</div>
 </div>
-</div>

tests/widget-system/post-visual-contract.test.cjs

@@ -287,9 +287,11 @@ test('article visual matrix pins every breakpoint, state and strict threshold',
 test('profile routes load versioned leaf styles and keep dialogs hidden initially', () => {
   const scripts = read('src/Core/ScriptsPart1b.php');
   const accountModals = read('inc/helpers/user-center-renderers/profile-account-modals.php');
+  const settingsSecurity = read('inc/helpers/user-center-renderers/settings-security.php');
   const userCenterJs = read('assets/js/routes/user-center.js');
   const userHomeCss = read('assets/css/routes/user-home.css');
   const profileLayoutCss = read('assets/css/routes/profile/layout.css');
+  const profileModalsCss = read('assets/css/routes/profile/modals.css');
 
   assert.ok(scripts.includes("$profile_parts = ['layout', 'lists', 'modals'];"));
   for (const part of ['user-center/shell', 'user-center/credits', 'user-center/vip', 'user-center/level', 'user-center/settings', 'revenue', 'user-center/revenue', 'user-center/revenue-earnings', 'user-center/responsive']) {
@@ -307,4 +309,9 @@ test('profile routes load versioned leaf styles and keep dialogs hidden initiall
   assert.match(userHomeCss, /\.aksrt-profile-details-modal\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/);
   assert.match(profileLayoutCss, /\.aksrt-cover-menu__panel\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/);
   assert.match(profileLayoutCss, /#aksrt-bg-file-input\[hidden\],[\s\S]*?#aksrt-avatar-file-input\[hidden\][\s\S]*?display:\s*none\s*!important;/);
+  assert.match(settingsSecurity, /data-modal="email-modal"[\s\S]*?<\/button>\s*<\/div>\s*<div class="security-action-item">[\s\S]*?data-modal="phone-modal"/);
+  assert.match(accountModals, /id="phone-modal" class="aksrt-modal" hidden role="dialog"[\s\S]*?aksrt-modal__overlay" data-close-modal[\s\S]*?aksrt-modal__box/);
+  assert.match(accountModals, /id="phone-modal"[\s\S]*?class="modal-field modal-field--code"[\s\S]*?class="code-input-group"[\s\S]*?class="aksrt-modal__footer"/);
+  assert.doesNotMatch(accountModals, /id="phone-modal"[\s\S]*?aksrt-modal__(?:dialog|body|actions)/);
+  assert.match(profileModalsCss, /\.modal-field input\[type="tel"\]/);
 });