fix: make admin sms code input visible

This commit is contained in:
Codex
2026-07-04 00:20:40 +08:00
parent 78d6ccc319
commit 6cf92358e0
2 changed files with 30 additions and 42 deletions

View File

@@ -14,6 +14,7 @@ export default function StudentLoginPage() {
const [phone, setPhone] = useState(''); const [phone, setPhone] = useState('');
const [code, setCode] = useState(''); const [code, setCode] = useState('');
const [debugCode, setDebugCode] = useState(''); const [debugCode, setDebugCode] = useState('');
const [codeSent, setCodeSent] = useState(false);
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const [reason, setReason] = useState(''); const [reason, setReason] = useState('');
@@ -96,6 +97,7 @@ export default function StudentLoginPage() {
const nextCode = typeof result.debugCode === 'string' ? result.debugCode : ''; const nextCode = typeof result.debugCode === 'string' ? result.debugCode : '';
setDebugCode(nextCode); setDebugCode(nextCode);
setCode(''); setCode('');
setCodeSent(true);
setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送'); setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送');
} catch (nextError) { } catch (nextError) {
setError(nextError instanceof Error ? nextError.message : '验证码发送失败'); setError(nextError instanceof Error ? nextError.message : '验证码发送失败');
@@ -142,21 +144,19 @@ export default function StudentLoginPage() {
{reason ? <Text className='error-text'>{reason}</Text> : null} {reason ? <Text className='error-text'>{reason}</Text> : null}
<View className='login-field'> <View className='login-field'>
<Text className='login-field-label'></Text> <Text className='login-field-label'></Text>
<View className='login-input-shell'> <View className='login-input-shell login-phone-shell'>
<Input className='login-input-native' type='text' maxlength={11} placeholder='请输入手机号' value={phone} onInput={event => setPhoneDigits(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> </View>
<View className='login-field'> <View className='login-field'>
<Text className='login-field-label'></Text> <Text className='login-field-label'></Text>
<View className='login-code-row'>
<View className='login-input-shell login-code-shell'> <View className='login-input-shell login-code-shell'>
<Input className='login-input-native' type='text' maxlength={6} placeholder='请输入验证码' value={code} onInput={event => setCodeDigits(String(event.detail.value || ''))} /> <Input className='login-input-native' type='text' maxlength={6} placeholder={codeSent ? '请输入收到的验证码' : '先发送验证码'} value={code} onInput={event => setCodeDigits(String(event.detail.value || ''))} />
</View> </View>
<Button className='login-send-button secondary-button' disabled={!canSendCode} loading={sending} onClick={handleSendCode}> <Button className='login-send-button secondary-button' disabled={!canSendCode} loading={sending} onClick={handleSendCode}>
{message ? '重' : '发送'} {codeSent ? '重新发送验证码' : '发送验证码'}
</Button> </Button>
</View> <Text className={`login-field-help ${message ? 'success' : ''}`}>{message || '收到短信后在上方填写验证码'}</Text>
<Text className={`login-field-help ${message ? 'success' : ''}`}>{message || '收到短信后在这里填写验证码'}</Text>
</View> </View>
<Button className='primary-button' disabled={!canSubmit} loading={verifying} onClick={handleLogin}> <Button className='primary-button' disabled={!canSubmit} loading={verifying} onClick={handleLogin}>

View File

@@ -119,7 +119,8 @@
.login-input, .login-input,
.login-input-shell { .login-input-shell {
box-sizing: border-box; box-sizing: border-box;
display: block; display: flex;
align-items: center;
width: 100%; width: 100%;
height: 54px; height: 54px;
min-height: 54px; min-height: 54px;
@@ -133,8 +134,6 @@
} }
.login-input-shell { .login-input-shell {
display: flex;
align-items: center;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
@@ -156,7 +155,10 @@
} }
.login-input-native .taro-input, .login-input-native .taro-input,
.login-input-native .weui-input,
.login-input-native .taro-input__input,
.login-input-native input, .login-input-native input,
.login-input-native > input,
.login-input-shell input { .login-input-shell input {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
@@ -171,34 +173,23 @@
line-height: 52px; line-height: 52px;
} }
.login-code-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 104px;
align-items: center;
gap: 10px;
min-width: 0;
}
.login-code-input {
min-width: 0;
}
.login-code-shell { .login-code-shell {
min-width: 0; width: 100%;
padding: 0; padding: 0;
} }
.login-send-button { .login-send-button {
width: 104px; width: 100%;
min-width: 104px; min-width: 0;
max-width: 104px; max-width: 100%;
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
} }
.login-card .login-input, .login-card .login-input,
.login-card .login-input-shell { .login-card .login-input-shell {
display: block; display: flex;
align-items: center;
width: 100%; width: 100%;
height: 54px; height: 54px;
min-height: 54px; min-height: 54px;
@@ -212,8 +203,6 @@
} }
.login-card .login-input-shell { .login-card .login-input-shell {
display: flex;
align-items: center;
padding: 0; padding: 0;
} }
@@ -231,7 +220,10 @@
} }
.login-card .login-input-native .taro-input, .login-card .login-input-native .taro-input,
.login-card .login-input-native .weui-input,
.login-card .login-input-native .taro-input__input,
.login-card .login-input-native input, .login-card .login-input-native input,
.login-card .login-input-native > input,
.login-card .login-input-shell input { .login-card .login-input-shell input {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
@@ -247,15 +239,15 @@
line-height: 52px; line-height: 52px;
} }
.login-card .login-code-row .login-code-input, .login-card .login-phone-shell,
.login-card .login-code-row .login-code-shell { .login-card .login-code-shell {
width: 100%; width: 100%;
} }
.login-card .login-send-button.secondary-button { .login-card .login-send-button.secondary-button {
width: 104px; width: 100%;
min-width: 104px; min-width: 0;
max-width: 104px; max-width: 100%;
height: 54px; height: 54px;
min-height: 54px; min-height: 54px;
padding: 0; padding: 0;
@@ -2458,13 +2450,9 @@
flex: 1 1 150px; flex: 1 1 150px;
} }
.login-code-row {
grid-template-columns: minmax(0, 1fr) 92px;
}
.login-send-button { .login-send-button {
width: 92px; width: 100%;
min-width: 92px; min-width: 0;
} }
.asset-preview-frame, .asset-preview-frame,