From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/Login/components/LoginForm.vue | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 360 insertions(+), 0 deletions(-)
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
new file mode 100644
index 0000000..1bb5173
--- /dev/null
+++ b/src/views/Login/components/LoginForm.vue
@@ -0,0 +1,360 @@
+<template>
+ <el-form
+ v-show="getShow"
+ ref="formLogin"
+ :model="loginData.loginForm"
+ :rules="LoginRules"
+ class="login-form"
+ label-position="top"
+ label-width="120px"
+ size="large"
+ >
+ <el-row class="mx-[-10px]">
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <LoginFormTitle class="w-full" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+ <el-input
+ v-model="loginData.loginForm.tenantName"
+ :placeholder="t('login.tenantNamePlaceholder')"
+ :prefix-icon="iconHouse"
+ link
+ type="primary"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginData.loginForm.username"
+ :placeholder="t('login.usernamePlaceholder')"
+ :prefix-icon="iconAvatar"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginData.loginForm.password"
+ :placeholder="t('login.passwordPlaceholder')"
+ :prefix-icon="iconLock"
+ show-password
+ type="password"
+ @keyup.enter="getCode()"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px mt-[-20px] mb-[-20px]">
+ <el-form-item>
+ <el-row justify="space-between" style="width: 100%">
+ <el-col :span="6">
+ <el-checkbox v-model="loginData.loginForm.rememberMe">
+ {{ t('login.remember') }}
+ </el-checkbox>
+ </el-col>
+ <el-col :offset="6" :span="12">
+ <el-link
+ class="float-right"
+ type="primary"
+ @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
+ >
+ {{ t('login.forgetPassword') }}
+ </el-link>
+ </el-col>
+ </el-row>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <XButton
+ :loading="loginLoading"
+ :title="t('login.login')"
+ class="w-full"
+ type="primary"
+ @click="getCode()"
+ />
+ </el-form-item>
+ </el-col>
+ <Verify
+ v-if="loginData.captchaEnable === 'true'"
+ ref="verify"
+ :captchaType="captchaType"
+ :imgSize="{ width: '400px', height: '200px' }"
+ mode="pop"
+ @success="handleLogin"
+ />
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <el-row :gutter="5" justify="space-between" style="width: 100%">
+ <el-col :span="8">
+ <XButton
+ :title="t('login.btnMobile')"
+ class="w-full"
+ @click="setLoginState(LoginStateEnum.MOBILE)"
+ />
+ </el-col>
+ <el-col :span="8">
+ <XButton
+ :title="t('login.btnQRCode')"
+ class="w-full"
+ @click="setLoginState(LoginStateEnum.QR_CODE)"
+ />
+ </el-col>
+ <el-col :span="8">
+ <XButton
+ :title="t('login.btnRegister')"
+ class="w-full"
+ @click="setLoginState(LoginStateEnum.REGISTER)"
+ />
+ </el-col>
+ </el-row>
+ </el-form-item>
+ </el-col>
+ <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <div class="w-full flex justify-between">
+ <Icon
+ v-for="(item, key) in socialList"
+ :key="key"
+ :icon="item.icon"
+ :size="30"
+ class="anticon cursor-pointer"
+ color="#999"
+ @click="doSocialLogin(item.type)"
+ />
+ </div>
+ </el-form-item>
+ </el-col>
+ <el-divider content-position="center">钀屾柊蹇呰</el-divider>
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <div class="w-full flex justify-between">
+ <el-link href="https://doc.iocoder.cn/" target="_blank">馃摎寮�鍙戞寚鍗�</el-link>
+ <el-link href="https://doc.iocoder.cn/video/" target="_blank">馃敟瑙嗛鏁欑▼</el-link>
+ <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">
+ 鈿￠潰璇曟墜鍐�
+ </el-link>
+ <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">
+ 馃澶栧寘鍜ㄨ
+ </el-link>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+</template>
+<script lang="ts" setup>
+import { ElLoading } from 'element-plus'
+import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+import { useIcon } from '@/hooks/web/useIcon'
+
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+
+defineOptions({ name: 'LoginForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
+const { validForm } = useFormValid(formLogin)
+const { setLoginState, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 婊戝潡 clickWord 鐐瑰嚮鏂囧瓧 pictureWord 鏂囧瓧楠岃瘉鐮�
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+
+const LoginRules = {
+ tenantName: [required],
+ username: [required],
+ password: [required]
+}
+const loginData = reactive({
+ isShowPassword: false,
+ captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+ tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+ loginForm: {
+ tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+ username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+ password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+ captchaVerification: '',
+ rememberMe: true // 榛樿璁板綍鎴戙�傚鏋滀笉闇�瑕侊紝鍙墜鍔ㄤ慨鏀�
+ }
+})
+
+const socialList = [
+ { icon: 'ant-design:wechat-filled', type: 30 },
+ { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
+ { icon: 'ant-design:github-filled', type: 0 },
+ { icon: 'ant-design:alipay-circle-filled', type: 0 }
+]
+
+// 鑾峰彇楠岃瘉鐮�
+const getCode = async () => {
+ // 鎯呭喌涓�锛屾湭寮�鍚細鍒欑洿鎺ョ櫥褰�
+ if (loginData.captchaEnable === 'false') {
+ await handleLogin({})
+ } else {
+ // 鎯呭喌浜岋紝宸插紑鍚細鍒欏睍绀洪獙璇佺爜锛涘彧鏈夊畬鎴愰獙璇佺爜鐨勬儏鍐碉紝鎵嶈繘琛岀櫥褰�
+ // 寮瑰嚭楠岃瘉鐮�
+ verify.value.show()
+ }
+}
+// 鑾峰彇绉熸埛 ID
+const getTenantId = async () => {
+ if (loginData.tenantEnable === 'true') {
+ const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
+ authUtil.setTenantId(res)
+ }
+}
+// 璁颁綇鎴�
+const getLoginFormCache = () => {
+ const loginForm = authUtil.getLoginForm()
+ if (loginForm) {
+ loginData.loginForm = {
+ ...loginData.loginForm,
+ username: loginForm.username ? loginForm.username : loginData.loginForm.username,
+ password: loginForm.password ? loginForm.password : loginData.loginForm.password,
+ rememberMe: loginForm.rememberMe,
+ tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
+ }
+ }
+}
+// 鏍规嵁鍩熷悕锛岃幏寰楃鎴蜂俊鎭�
+const getTenantByWebsite = async () => {
+ if (loginData.tenantEnable === 'true') {
+ const website = location.host
+ const res = await LoginApi.getTenantByWebsite(website)
+ if (res) {
+ loginData.loginForm.tenantName = res.name
+ authUtil.setTenantId(res.id)
+ }
+ }
+}
+const loading = ref() // ElLoading.service 杩斿洖鐨勫疄渚�
+// 鐧诲綍
+const handleLogin = async (params: any) => {
+ loginLoading.value = true
+ try {
+ await getTenantId()
+ const data = await validForm()
+ if (!data) {
+ return
+ }
+ const loginDataLoginForm = { ...loginData.loginForm }
+ loginDataLoginForm.captchaVerification = params.captchaVerification
+ const res = await LoginApi.login(loginDataLoginForm)
+ if (!res) {
+ return
+ }
+ loading.value = ElLoading.service({
+ lock: true,
+ text: '姝ｅ湪鍔犺浇绯荤粺涓�...',
+ background: 'rgba(0, 0, 0, 0.7)'
+ })
+ if (loginDataLoginForm.rememberMe) {
+ authUtil.setLoginForm(loginDataLoginForm)
+ } else {
+ authUtil.removeLoginForm()
+ }
+ authUtil.setToken(res)
+ if (!redirect.value) {
+ redirect.value = '/'
+ }
+ // 鍒ゆ柇鏄惁涓篠SO鐧诲綍
+ if (redirect.value.indexOf('sso') !== -1) {
+ window.location.href = window.location.href.replace('/login?redirect=', '')
+ } else {
+ await push({ path: redirect.value || permissionStore.addRouters[0].path })
+ }
+ } finally {
+ loginLoading.value = false
+ loading.value.close()
+ }
+}
+
+// 绀句氦鐧诲綍
+const doSocialLogin = async (type: number) => {
+ if (type === 0) {
+ message.error('姝ゆ柟寮忔湭閰嶇疆')
+ } else {
+ loginLoading.value = true
+ if (loginData.tenantEnable === 'true') {
+ // 灏濊瘯鍏堥�氳繃 tenantName 鑾峰彇绉熸埛
+ await getTenantId()
+ // 濡傛灉鑾峰彇涓嶅埌锛屽垯闇�瑕佸脊鍑烘彁绀猴紝杩涜澶勭悊
+ if (!authUtil.getTenantId()) {
+ try {
+ const data = await message.prompt('璇疯緭鍏ョ鎴峰悕绉�', t('common.reminder'))
+ if (data?.action !== 'confirm') throw 'cancel'
+ const res = await LoginApi.getTenantIdByName(data.value)
+ authUtil.setTenantId(res)
+ } catch (error) {
+ if (error === 'cancel') return
+ } finally {
+ loginLoading.value = false
+ }
+ }
+ }
+ // 璁＄畻 redirectUri
+ // 娉ㄦ剰: type銆乺edirect 闇�瑕佸厛 encode 涓�娆★紝鍚﹀垯閽夐拤鍥炶皟浼氫涪澶便��
+ // 閰嶅悎 social-login.vue#getUrlValue() 浣跨敤
+ const redirectUri =
+ location.origin +
+ '/social-login?' +
+ encodeURIComponent(`type=${type}&redirect=${redirect.value || '/'}`)
+
+ // 杩涜璺宠浆
+ window.location.href = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
+ }
+}
+watch(
+ () => currentRoute.value,
+ (route: RouteLocationNormalizedLoaded) => {
+ redirect.value = route?.query?.redirect as string
+ },
+ {
+ immediate: true
+ }
+)
+onMounted(() => {
+ getLoginFormCache()
+ getTenantByWebsite()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+ &:hover {
+ color: var(--el-color-primary) !important;
+ }
+}
+
+.login-code {
+ float: right;
+ width: 100%;
+ height: 38px;
+
+ img {
+ width: 100%;
+ height: auto;
+ max-width: 100px;
+ vertical-align: middle;
+ cursor: pointer;
+ }
+}
+</style>
--
Gitblit v1.8.0