diff --git a/apps/taro/src/pages/student/login/index.tsx b/apps/taro/src/pages/student/login/index.tsx
index 9fe29190..e1d57f29 100644
--- a/apps/taro/src/pages/student/login/index.tsx
+++ b/apps/taro/src/pages/student/login/index.tsx
@@ -19,6 +19,10 @@ export default function StudentLoginPage() {
const [reason, setReason] = useState('');
const [sending, setSending] = useState(false);
const [verifying, setVerifying] = useState(false);
+ const phoneValue = phone.trim();
+ const codeValue = code.trim();
+ const canSendCode = runtimeReady && /^1\d{10}$/.test(phoneValue) && !sending;
+ const canSubmit = runtimeReady && /^1\d{10}$/.test(phoneValue) && /^\d{4,8}$/.test(codeValue || debugCode) && !verifying;
useEffect(() => {
ensureRuntimeConfigLoaded()
@@ -71,13 +75,19 @@ export default function StudentLoginPage() {
};
async function handleSendCode() {
+ if (!/^1\d{10}$/.test(phoneValue)) {
+ setError('请输入 11 位手机号');
+ return;
+ }
setSending(true);
setError('');
setMessage('');
try {
- const result = await sendSmsCode(phone);
+ await ensureTenantResolved();
+ const result = await sendSmsCode(phoneValue);
const nextCode = typeof result.debugCode === 'string' ? result.debugCode : '';
setDebugCode(nextCode);
+ setCode('');
setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送');
} catch (nextError) {
setError(nextError instanceof Error ? nextError.message : '验证码发送失败');
@@ -87,10 +97,18 @@ export default function StudentLoginPage() {
}
async function handleLogin() {
+ if (!/^1\d{10}$/.test(phoneValue)) {
+ setError('请输入 11 位手机号');
+ return;
+ }
+ if (!/^\d{4,8}$/.test(codeValue || debugCode)) {
+ setError('请输入短信验证码');
+ return;
+ }
setVerifying(true);
setError('');
try {
- await verifySmsCode(phone, code || debugCode);
+ await verifySmsCode(phoneValue, codeValue || debugCode);
redirectAfterLogin(params.redirect || landingPath());
} catch (nextError) {
setError(nextError instanceof Error ? nextError.message : '登录失败');
@@ -116,21 +134,25 @@ export default function StudentLoginPage() {
{reason ? {reason} : null}
手机号
- setPhone(String(event.detail.value || ''))} />
+
+ setPhone(String(event.detail.value || ''))} />
+
验证码
- setCode(String(event.detail.value || ''))} />
-
+ {message || '收到短信后在这里填写验证码'}
-
+
登录
- {message ? {message} : null}
{error ? {error} : null}
diff --git a/apps/taro/src/pages/student/student.css b/apps/taro/src/pages/student/student.css
index b66b60d7..0cf9660e 100644
--- a/apps/taro/src/pages/student/student.css
+++ b/apps/taro/src/pages/student/student.css
@@ -116,7 +116,8 @@
font-weight: 850;
}
-.login-input {
+.login-input,
+.login-input-shell {
box-sizing: border-box;
display: block;
width: 100%;
@@ -131,6 +132,27 @@
line-height: 54px;
}
+.login-input-shell {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ overflow: hidden;
+}
+
+.login-input-native {
+ display: block;
+ width: 100%;
+ height: 52px;
+ min-height: 52px;
+ padding: 0 16px;
+ 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;
@@ -143,6 +165,10 @@
min-width: 0;
}
+.login-code-shell {
+ min-width: 0;
+}
+
.login-send-button {
width: 104px;
min-width: 104px;
@@ -151,7 +177,8 @@
white-space: nowrap;
}
-.login-card .login-input {
+.login-card .login-input,
+.login-card .login-input-shell {
display: block;
width: 100%;
height: 54px;
@@ -165,7 +192,24 @@
line-height: 54px;
}
-.login-card .login-code-row .login-code-input {
+.login-card .login-input-shell {
+ display: flex;
+ align-items: center;
+ padding: 0;
+}
+
+.login-card .login-input-native {
+ width: 100%;
+ height: 52px;
+ min-height: 52px;
+ padding: 0 16px;
+ 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%;
}
@@ -181,6 +225,25 @@
line-height: 54px;
}
+.login-card .primary-button[disabled],
+.login-card .secondary-button[disabled],
+.login-card .login-send-button[disabled] {
+ opacity: 0.55;
+}
+
+.login-field-help {
+ display: block;
+ min-height: 20px;
+ color: #64748b;
+ font-size: 14px;
+ line-height: 1.45;
+}
+
+.login-field-help.success {
+ color: #0f766e;
+ font-weight: 750;
+}
+
.login-page-admin {
background:
linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),