<script lang="ts" setup>
|
import type { VbenFormSchema } from '@vben/common-ui';
|
|
import type { AuthApi } from '#/api/core/auth';
|
|
import { computed, ref } from 'vue';
|
|
import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
|
import { isCaptchaEnable } from '@vben/hooks';
|
import { $t } from '@vben/locales';
|
|
import { checkCaptcha, getCaptcha } from '#/api/core/auth';
|
import { useAuthStore } from '#/store';
|
import { selectTerminal, terminalType } from '#/mobile/terminal';
|
import { errorText } from '#/mobile/api';
|
import { useRoute } from 'vue-router';
|
|
defineOptions({ name: 'Login' });
|
|
const authStore = useAuthStore();
|
const route = useRoute();
|
const loginError = ref(route.query.loadError ? '菜单加载失败，请重新登录后重试。' : '');
|
const captchaEnable = isCaptchaEnable();
|
|
const loginRef = ref();
|
const verifyRef = ref();
|
|
const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
|
|
/** 滑块验证码尺寸：移动端按视口宽度收缩，避免超出屏幕无法拖动 */
|
const captchaImgSize = computed(() => {
|
const width =
|
terminalType.value === 'mobile'
|
? Math.min(315, Math.max(260, window.innerWidth - 48))
|
: 400;
|
return { width: `${width}px`, height: `${Math.round(width / 2)}px` };
|
});
|
|
/** 处理登录 */
|
async function handleLogin(values: AuthApi.LoginParams) {
|
if (captchaEnable) {
|
verifyRef.value.show();
|
return;
|
}
|
loginError.value = '';
|
try { await authStore.authLogin('username', values); }
|
catch (e) { loginError.value = errorText(e); }
|
}
|
|
/** 验证码通过，执行登录 */
|
async function handleVerifySuccess({
|
captchaVerification,
|
}: {
|
captchaVerification: string;
|
}) {
|
loginError.value = '';
|
try { await authStore.authLogin('username', {
|
...(await loginRef.value.getFormApi().getValues()),
|
captchaVerification,
|
}); } catch (e) { loginError.value = errorText(e); }
|
}
|
|
const formSchema = computed((): VbenFormSchema[] => {
|
return [
|
{
|
component: 'VbenInput',
|
componentProps: {
|
'aria-label': $t('authentication.username'),
|
autocomplete: 'username',
|
placeholder: $t('authentication.usernameTip'),
|
},
|
fieldName: 'username',
|
label: $t('authentication.username'),
|
rules: z
|
.string()
|
.min(1, { message: $t('authentication.usernameTip') })
|
.default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
|
},
|
{
|
component: 'VbenInputPassword',
|
componentProps: {
|
'aria-label': $t('authentication.password'),
|
autocomplete: 'current-password',
|
placeholder: $t('authentication.passwordTip'),
|
},
|
fieldName: 'password',
|
label: $t('authentication.password'),
|
rules: z
|
.string()
|
.min(1, { message: $t('authentication.passwordTip') })
|
.default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
|
},
|
];
|
});
|
</script>
|
|
<template>
|
<div>
|
<div class="login-brand">
|
<img
|
src="/images/tahe-logo.png"
|
alt="塔河种业"
|
class="login-brand-logo"
|
/>
|
<p class="login-brand-name">塔河种业加工销售供应链数字化管理平台</p>
|
</div>
|
<fieldset class="terminal-selector">
|
<legend>选择使用端</legend>
|
<div class="terminal-options">
|
<label :class="{ selected: terminalType === 'mobile' }">
|
<input type="radio" name="terminal" value="mobile" :checked="terminalType === 'mobile'" :disabled="authStore.loginLoading" @change="selectTerminal('mobile')" />
|
<span>移动端</span>
|
</label>
|
<label :class="{ selected: terminalType === 'pc' }">
|
<input type="radio" name="terminal" value="pc" :checked="terminalType === 'pc'" :disabled="authStore.loginLoading" @change="selectTerminal('pc')" />
|
<span>PC 端</span>
|
</label>
|
</div>
|
<p>已按屏幕大小选择，可手动切换</p>
|
</fieldset>
|
<AuthenticationLogin
|
ref="loginRef"
|
:form-schema="formSchema"
|
:loading="authStore.loginLoading"
|
:show-field-labels="terminalType === 'mobile'"
|
:submit-button-text="terminalType === 'mobile' ? '登录移动端' : '登录 PC 端'"
|
title="欢迎回来"
|
:sub-title="terminalType === 'mobile' ? '使用已有账号登录现场作业' : '登录塔河种业加工销售供应链数字化管理平台'"
|
:show-code-login="false"
|
:show-qrcode-login="false"
|
:show-third-party-login="false"
|
:show-register="false"
|
:show-forget-password="false"
|
:show-doc-link="false"
|
@submit="handleLogin"
|
/>
|
<p v-if="loginError" class="login-error" role="alert">{{loginError}}</p>
|
<Verification
|
ref="verifyRef"
|
v-if="captchaEnable"
|
:captcha-type="captchaType"
|
:check-captcha-api="checkCaptcha"
|
:get-captcha-api="getCaptcha"
|
:img-size="captchaImgSize"
|
mode="pop"
|
@on-success="handleVerifySuccess"
|
/>
|
</div>
|
</template>
|
|
<style scoped>
|
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
|
.login-brand-logo { height: 72px; width: auto; }
|
.login-brand-name { margin: 0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: #0f172a; }
|
.terminal-selector { border: 0; margin: 0 0 24px; padding: 0; }
|
.login-error { padding:12px;color:#b91c1c;background:#fef2f2;border-radius:8px; }
|
.terminal-selector legend { font-size: 16px; margin-bottom: 8px; }
|
.terminal-options { display: flex; gap: 12px; }
|
.terminal-options label { display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:52px;border:1px solid #64748b;border-radius:8px;cursor:pointer; }
|
.terminal-options label.selected { border-color:#0369a1;color:#0369a1;background:#f0f9ff; }
|
.terminal-options label:focus-within { outline:2px solid #0369a1;outline-offset:2px; }
|
.terminal-selector p { margin-top:8px;color:#475569;font-size:14px; }
|
</style>
|
