yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端和 PC 端登录页都加了“图形验证码

Browse Source
This commit is contained in:
yml2213
2026-06-12 21:16:08 +08:00
parent 8cfb63a3e7
commit f6ea3e29a6
13 changed files with 456 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/auth/api/auth.ts
+14 -1
View File
@@ -25,11 +25,24 @@ export interface LoginData {
tokens: TokenPair
}
export async function sendSmsCode(phone: string) {
export interface AuthCaptcha {
captcha_id: string
image: string
expires_in: number
}
export async function fetchAuthCaptcha() {
const { data } = await apiClient.get<ApiResponse<AuthCaptcha>>('/auth/captcha')
return data.data
}
export async function sendSmsCode(phone: string, captchaId: string, captchaCode: string) {
const { data } = await apiClient.post<ApiResponse<{ phone: string; expires_in: number }>>(
'/auth/sms/send',
{
phone,
captcha_id: captchaId,
captcha_code: captchaCode,
}
)
return data.data
frontend/src/features/auth/views/LoginView.vue
+89 -4
View File
@@ -1,20 +1,23 @@
<script setup lang="ts">
import { readError } from '@/shared/utils/error'
import { ElMessage } from 'element-plus'
import { ChatLineRound, Iphone } from '@element-plus/icons-vue'
import { onUnmounted, reactive, ref } from 'vue'
import { ChatLineRound, Iphone, Key } from '@element-plus/icons-vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { sendSmsCode } from '@/features/auth/api/auth'
import { fetchAuthCaptcha, sendSmsCode, type AuthCaptcha } from '@/features/auth/api/auth'
import { useSessionStore } from '@/stores/session'
const router = useRouter()
const session = useSessionStore()
const loading = ref(false)
const sending = ref(false)
const captchaLoading = ref(false)
const captcha = ref<AuthCaptcha | null>(null)
const countDown = ref(0)
const form = reactive({
phone: '',
captchaCode: '',
code: '',
})
@@ -38,23 +41,49 @@ onUnmounted(() => {
}
})
onMounted(loadCaptcha)
async function loadCaptcha() {
captchaLoading.value = true
try {
captcha.value = await fetchAuthCaptcha()
form.captchaCode = ''
} catch (error) {
ElMessage.error(readError(error, '图形验证码加载失败'))
} finally {
captchaLoading.value = false
}
}
async function handleSendCode() {
if (!form.phone.trim()) {
ElMessage.warning('请输入手机号')
return
}
if (!captcha.value?.captcha_id || !form.captchaCode.trim()) {
ElMessage.warning('请输入图形验证码')
return
}
sending.value = true
try {
await sendSmsCode(form.phone)
await sendSmsCode(form.phone, captcha.value.captcha_id, form.captchaCode)
ElMessage.success('验证码已发送，请注意查收')
startCountDown()
} catch (error) {
ElMessage.error(readError(error, '验证码发送失败'))
} finally {
await loadCaptcha()
sending.value = false
}
}
async function refreshCaptcha() {
if (captchaLoading.value) {
return
}
await loadCaptcha()
}
async function handleLogin() {
loading.value = true
try {
@@ -108,6 +137,29 @@ async function handleLogin() {
/>
</el-form-item>
<el-form-item label="图形验证码">
<div class="user-captcha-row">
<el-input
v-model="form.captchaCode"
maxlength="4"
placeholder="请输入图形验证码"
size="large"
:prefix-icon="Key"
@keyup.enter="handleSendCode"
/>
<button
class="user-captcha-image"
type="button"
:disabled="captchaLoading"
aria-label="刷新图形验证码"
@click="refreshCaptcha"
>
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</div>
</el-form-item>
<el-form-item label="验证码">
<div class="user-code-row">
<el-input
@@ -311,6 +363,39 @@ async function handleLogin() {
width: 100%;
}
.user-captcha-row {
display: grid;
grid-template-columns: 1fr 132px;
gap: 10px;
width: 100%;
}
.user-captcha-image {
display: grid;
height: 46px;
place-items: center;
overflow: hidden;
border: 1px solid #dbe5f0;
border-radius: 10px;
background: #f8fafc;
color: #1477ff;
cursor: pointer;
font-size: 13px;
font-weight: 700;
padding: 0;
}
.user-captcha-image:disabled {
cursor: wait;
opacity: 0.7;
}
.user-captcha-image img {
display: block;
width: 132px;
height: 44px;
}
.user-code-row .el-button {
height: 46px;
border-radius: 10px;
frontend/src/features/auth/views/MobileLoginView.vue
+83 -2
View File
@@ -1,23 +1,53 @@
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { fetchAuthCaptcha, type AuthCaptcha } from '@/features/auth/api/auth'
import { useSessionStore } from '@/stores/session'
import { useSmsCountdown } from '@/shared/composables/useSmsCountdown'
import { readError } from '@/shared/utils/error'
const router = useRouter()
const route = useRoute()
const session = useSessionStore()
const loading = ref(false)
const agreed = ref(false)
const captchaLoading = ref(false)
const captcha = ref<AuthCaptcha | null>(null)
const form = reactive({
phone: '',
captchaCode: '',
code: '',
})
const { countDown, sending, handleSendCode } = useSmsCountdown()
onMounted(loadCaptcha)
async function loadCaptcha() {
captchaLoading.value = true
try {
captcha.value = await fetchAuthCaptcha()
form.captchaCode = ''
} catch (error) {
showToast({ message: readError(error, '图形验证码加载失败'), icon: 'cross' })
} finally {
captchaLoading.value = false
}
}
async function sendCode() {
const shouldRefresh = Boolean(form.captchaCode.trim())
await handleSendCode(form.phone, {
captchaId: captcha.value?.captcha_id || '',
captchaCode: form.captchaCode,
})
if (shouldRefresh) {
await loadCaptcha()
}
}
async function handleLogin() {
if (!agreed.value) {
showDialog({
@@ -61,6 +91,25 @@ async function handleLogin() {
<input v-model="form.phone" type="tel" maxlength="11" placeholder="手机号" />
</label>
<label class="auth-input-row captcha-row">
<input
v-model="form.captchaCode"
type="text"
maxlength="4"
autocomplete="off"
placeholder="图形验证码"
/>
<button
class="captcha-image-button"
type="button"
:disabled="captchaLoading"
@click="loadCaptcha"
>
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</label>
<label class="auth-input-row code-row">
<input
v-model="form.code"
@@ -76,7 +125,7 @@ async function handleLogin() {
:disabled="sending || countDown > 0"
:loading="sending"
class="code-btn"
@click="handleSendCode(form.phone)"
@click="sendCode"
>
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</van-button>
@@ -212,6 +261,11 @@ async function handleLogin() {
gap: 8px;
}
.auth-input-row.captcha-row {
gap: 10px;
padding-right: 4px;
}
.auth-input-row input {
width: 100%;
min-width: 0;
@@ -231,6 +285,33 @@ async function handleLogin() {
justify-content: flex-end;
}
.captcha-image-button {
display: grid;
flex: 0 0 116px;
width: 116px;
height: 40px;
place-items: center;
overflow: hidden;
border: 1px solid #dbe5f0;
border-radius: 8px;
background: #f8fafc;
color: #1477ff;
font-size: 12px;
font-weight: 800;
padding: 0;
}
.captcha-image-button:disabled {
opacity: 0.65;
}
.captcha-image-button img {
display: block;
width: 120px;
height: 40px;
object-fit: cover;
}
.code-btn {
min-width: 82px;
height: 32px;
frontend/src/features/auth/views/MobileRegisterView.vue
+83 -2
View File
@@ -1,24 +1,54 @@
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { fetchAuthCaptcha, type AuthCaptcha } from '@/features/auth/api/auth'
import { useSessionStore } from '@/stores/session'
import { useSmsCountdown } from '@/shared/composables/useSmsCountdown'
import { readError } from '@/shared/utils/error'
const router = useRouter()
const route = useRoute()
const session = useSessionStore()
const loading = ref(false)
const agreed = ref(false)
const captchaLoading = ref(false)
const captcha = ref<AuthCaptcha | null>(null)
const form = reactive({
phone: '',
captchaCode: '',
code: '',
inviteCode: '',
})
const { countDown, sending, handleSendCode } = useSmsCountdown()
onMounted(loadCaptcha)
async function loadCaptcha() {
captchaLoading.value = true
try {
captcha.value = await fetchAuthCaptcha()
form.captchaCode = ''
} catch (error) {
showToast({ message: readError(error, '图形验证码加载失败'), icon: 'cross' })
} finally {
captchaLoading.value = false
}
}
async function sendCode() {
const shouldRefresh = Boolean(form.captchaCode.trim())
await handleSendCode(form.phone, {
captchaId: captcha.value?.captcha_id || '',
captchaCode: form.captchaCode,
})
if (shouldRefresh) {
await loadCaptcha()
}
}
async function handleRegister() {
if (!agreed.value) {
showToast({
@@ -68,6 +98,25 @@ async function handleRegister() {
/>
</label>
<label class="auth-input-row captcha-row">
<input
v-model="form.captchaCode"
type="text"
maxlength="4"
autocomplete="off"
placeholder="图形验证码"
/>
<button
class="captcha-image-button"
type="button"
:disabled="captchaLoading"
@click="loadCaptcha"
>
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</label>
<label class="auth-input-row code-row">
<input
v-model="form.code"
@@ -83,7 +132,7 @@ async function handleRegister() {
:disabled="sending || countDown > 0"
:loading="sending"
class="code-btn"
@click="handleSendCode(form.phone)"
@click="sendCode"
>
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</van-button>
@@ -223,6 +272,11 @@ async function handleRegister() {
gap: 8px;
}
.auth-input-row.captcha-row {
gap: 10px;
padding-right: 4px;
}
.auth-input-row input {
width: 100%;
min-width: 0;
@@ -242,6 +296,33 @@ async function handleRegister() {
justify-content: flex-end;
}
.captcha-image-button {
display: grid;
flex: 0 0 116px;
width: 116px;
height: 40px;
place-items: center;
overflow: hidden;
border: 1px solid #dbe5f0;
border-radius: 8px;
background: #f8fafc;
color: #1477ff;
font-size: 12px;
font-weight: 800;
padding: 0;
}
.captcha-image-button:disabled {
opacity: 0.65;
}
.captcha-image-button img {
display: block;
width: 120px;
height: 40px;
object-fit: cover;
}
.code-btn {
min-width: 82px;
height: 32px;
frontend/src/shared/composables/useSmsCountdown.ts
+9 -2
View File
@@ -26,15 +26,22 @@ export function useSmsCountdown() {
}
})
async function handleSendCode(phone: string) {
async function handleSendCode(
phone: string,
captcha?: { captchaId: string; captchaCode: string }
) {
if (!phone.trim()) {
showToast({ message: '请输入手机号', icon: 'warning-o' })
return false
}
if (!captcha?.captchaId || !captcha.captchaCode.trim()) {
showToast({ message: '请输入图形验证码', icon: 'warning-o' })
return false
}
sending.value = true
try {
await sendSmsCode(phone)
await sendSmsCode(phone, captcha.captchaId, captcha.captchaCode)
showToast({
message: '验证码已发送，请注意查收',
icon: 'passed',