fix: stabilize admin sms login form

apps/taro/src/index.html

@@ -7,6 +7,7 @@
   <meta name="format-detection" content="telephone=no,address=no,email=no">
   <meta name="renderer" content="webkit">
   <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="theme-color" content="#0f172a">

apps/taro/src/pages/student/login/index.tsx

@@ -24,6 +24,14 @@ export default function StudentLoginPage() {
   const canSendCode = runtimeReady && /^1\d{10}$/.test(phoneValue) && !sending;
   const canSubmit = runtimeReady && /^1\d{10}$/.test(phoneValue) && /^\d{4,8}$/.test(codeValue || debugCode) && !verifying;
 
+  function setPhoneDigits(value: string) {
+    setPhone(value.replace(/\D/g, '').slice(0, 11));
+  }
+
+  function setCodeDigits(value: string) {
+    setCode(value.replace(/\D/g, '').slice(0, 6));
+  }
+
   useEffect(() => {
     ensureRuntimeConfigLoaded()
       .then(async () => {
@@ -135,14 +143,14 @@ export default function StudentLoginPage() {
         <View className='login-field'>
           <Text className='login-field-label'>手机号</Text>
           <View className='login-input-shell'>
-            <Input className='login-input-native' type='number' maxlength={11} placeholder='请输入手机号' value={phone} onInput={event => setPhone(String(event.detail.value || ''))} />
+            <Input className='login-input-native' type='text' maxlength={11} placeholder='请输入手机号' value={phone} onInput={event => setPhoneDigits(String(event.detail.value || ''))} />
           </View>
         </View>
         <View className='login-field'>
           <Text className='login-field-label'>验证码</Text>
           <View className='login-code-row'>
             <View className='login-input-shell login-code-shell'>
-              <Input className='login-input-native' type='number' maxlength={6} placeholder='请输入验证码' value={code} onInput={event => setCode(String(event.detail.value || ''))} />
+              <Input className='login-input-native' type='text' maxlength={6} placeholder='请输入验证码' value={code} onInput={event => setCodeDigits(String(event.detail.value || ''))} />
             </View>
             <Button className='login-send-button secondary-button' disabled={!canSendCode} loading={sending} onClick={handleSendCode}>
               {message ? '重发' : '发送'}

apps/taro/src/pages/student/student.css

@@ -140,6 +140,8 @@
 }
 
 .login-input-native {
+  box-sizing: border-box;
+  flex: 1 1 auto;
   display: block;
   width: 100%;
   height: 52px;
@@ -153,6 +155,22 @@
   line-height: 52px;
 }
 
+.login-input-native .taro-input,
+.login-input-native input,
+.login-input-shell input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 52px;
+  min-height: 52px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #111827;
+  font-size: 17px;
+  line-height: 52px;
+}
+
 .login-code-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 104px;
@@ -167,6 +185,7 @@
 
 .login-code-shell {
   min-width: 0;
+  padding: 0;
 }
 
 .login-send-button {
@@ -199,6 +218,9 @@
 }
 
 .login-card .login-input-native {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  display: block;
   width: 100%;
   height: 52px;
   min-height: 52px;
@@ -208,6 +230,23 @@
   line-height: 52px;
 }
 
+.login-card .login-input-native .taro-input,
+.login-card .login-input-native input,
+.login-card .login-input-shell input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 52px;
+  min-height: 52px;
+  padding: 0 16px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #111827;
+  font-size: 16px;
+  line-height: 52px;
+}
+
 .login-card .login-code-row .login-code-input,
 .login-card .login-code-row .login-code-shell {
   width: 100%;