map/ui/dasadmin/src/views/backend/login.vue

<template>
    <div class="login-div">
        <!-- <div class="switch-language">
            <el-dropdown size="large" :hide-timeout="50" placement="bottom-end" :hide-on-click="true">
                <Icon name="fa fa-globe" color="var(--el-text-color-secondary)" size="28" />
                <template #dropdown>
                    <el-dropdown-menu class="chang-lang">
                        <el-dropdown-item v-for="item in config.lang.langArray" :key="item.name" @click="editDefaultLang(item.name)">
                            {{ item.value }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div> -->
        <div @contextmenu.stop="" id="bubble" class="bubble">
            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
        </div>
        <div class="login">
            <div class="login-box">
                <div class="form">
                    <div class="title">
                        <div class="title1">欢迎使用润阳风电场系统</div>
                        <div class="title2">一站式数据采集平台</div>
                    </div>
                    <div class="content">
                        <el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
                            <el-form-item prop="username">
                                <el-input
                                    ref="usernameRef"
                                    type="text"
                                    clearable
                                    v-model="form.username"
                                    :placeholder="t('login.Please enter an account')"
                                >
                                    <template #prefix>
                                        <Icon name="fa fa-user" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    ref="passwordRef"
                                    v-model="form.password"
                                    type="password"
                                    :placeholder="t('login.Please input a password')"
                                    show-password
                                >
                                    <template #prefix>
                                        <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="state.showCaptcha" prop="captcha">
                                <el-space>
                                    <el-input ref="captchaRef" v-model="form.code" type="text" :placeholder="t('login.Please input a captcha')">
                                        <template #prefix>
                                            <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                                        </template>
                                    </el-input>
                                    <img @click.prevent="load()" :src="state.captcha" />
                                </el-space>
                            </el-form-item>
                            <!-- <el-checkbox v-model="form.keep" :label="t('login.Hold session')" size="default"></el-checkbox> -->
                            <el-form-item>
                                <el-button
                                    :loading="state.submitLoading"
                                    class="submit-button"
                                    round
                                    type="primary"
                                    size="large"
                                    @click="onSubmitPre()"
                                >
                                    {{ t('login.Sign in') }}
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import { getCaptchaData } from '/@/api/common'
import * as pageBubble from '/@/utils/pageBubble'
import type { FormInstance, InputInstance } from 'element-plus'
import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { editDefaultLang } from '/@/lang/index'
import { useConfig } from '/@/stores/config'
import { useAdminInfo } from '/@/stores/adminInfo'
import { login } from '/@/api/backend'
import { buildValidatorData } from '/@/utils/validate'
import router from '/@/router'
// import clickCaptcha from '/@/components/clickCaptcha'
import toggleDark from '/@/utils/useDark'
import { fullUrl } from '/@/utils/common'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import JSEncrypt from 'jsencrypt'
let timer: number

const config = useConfig()
const adminInfo = useAdminInfo()
toggleDark(config.layout.isDark)

const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const captchaRef = ref<InputInstance>()
const state = reactive({
    showCaptcha: true,
    submitLoading: false,
    captcha: '',
})
const form = reactive({
    username: '',
    password: '',
    keep: false,
    uuid: '',
    code: '',
})

const { t } = useI18n()

// 表单验证规则
const rules = reactive({
    username: [buildValidatorData({ name: 'required', message: t('login.Please enter an account') }), buildValidatorData({ name: 'account' })],
    password: [buildValidatorData({ name: 'required', message: t('login.Please input a password') }), buildValidatorData({ name: 'password' })],
    code: [buildValidatorData({ name: 'required', message: t('login.Please input a captcha') })],
})

const focusInput = () => {
    if (form.username === '') {
        usernameRef.value!.focus()
    } else if (form.password === '') {
        passwordRef.value!.focus()
    } else if (form.code === '') {
        captchaRef.value!.focus()
    }
}

onMounted(() => {
    timer = window.setTimeout(() => {
        pageBubble.init()
    }, 1000)
    load()
    // login('get')
    //     .then((res) => {
    //         state.showCaptcha = res.data.captcha
    //         nextTick(() => focusInput())
    //     })
    //     .catch((err) => {
    //         console.log(err)
    //     })
})

onBeforeUnmount(() => {
    clearTimeout(timer)
    pageBubble.removeListeners()
})

const onSubmitPre = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            // if (state.showCaptcha) {
            //     clickCaptcha(form.uuid, (captchaInfo: string) => onSubmit(captchaInfo))
            // } else {
            onSubmit()
            // }
        }
    })
}

const load = () => {
    getCaptchaData().then((res) => {
        form.uuid = res.data.key
        state.captcha = 'data:image\/png;base64,' + res.data.img
    })
}

const onSubmit = () => {
    state.submitLoading = true
    login(form)
        .then((res) => {
            if (res.code == 200) {
                adminInfo.dataFill({
                    id: res.data.sysUser.id,
                    username: res.data.sysUser.account,
                    nickname: res.data.sysUser.userName,
                    avatar: '',
                    last_login_time: '',
                    token: res.data.token,
                    refresh_token: '',
                    // 是否是superAdmin，用于判定是否显示终端按钮等，不做任何权限判断
                    super: false,
                })
                router.push({ path: adminBaseRoutePath })
            } else {
                ElNotification({
                    message: res.msg,
                    type: 'error',
                })
                load()
            }
        })
        .finally(() => {
            state.submitLoading = false
            // load()
        })
}
</script>

<style scoped lang="scss">
.login-div {
}
.switch-language {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.bubble {
    overflow: hidden;
    width: 64%;
    background: url(/@/assets/bg.png) no-repeat;
    background-size: 100% 100%;
}
.form-item-icon {
    height: auto;
}
.login {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 36%;
    height: 100%;
    align-items: center;
    justify-content: center;
    .login-box {
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: var(--ba-bg-color-overlay);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        .title1 {
            font-size: 36px;
            color: #333333;
            letter-spacing: 0;
            line-height: 36px;
            font-weight: 600;
        }
        .title2 {
            padding-top: 20px;
            font-size: 24px;
            color: #666666;
            letter-spacing: 0;
            line-height: 24px;
            font-weight: 400;
        }
    }
    .form {
        position: relative;
        .profile-avatar {
            display: block;
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 4px solid var(--ba-bg-color-overlay);
            top: -50px;
            right: calc(50% - 50px);
            z-index: 2;
            user-select: none;
        }
        .content {
            padding: 100px 0;
        }
        .submit-button {
            width: 100%;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 15px;
            // --el-button-bg-color: var(--el-color-primary);
        }
    }
}

@media screen and (max-width: 1370px) {
    .title {
        .title1 {
            font-size: 30px !important;
        }
        .title2 {
            font-size: 20px !important;
        }
    }
}
.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}
.content :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}

// 暗黑样式
@at-root .dark {
    .bubble {
        background: url(/@/assets/bg-dark.jpg) repeat;
    }
    .login {
        .login-box {
            background: #161b22;
        }
        .head {
            img {
                filter: brightness(61%);
            }
        }
        .form {
            .submit-button {
                --el-button-bg-color: var(--el-color-primary-light-5);
                --el-button-border-color: rgba(240, 252, 241, 0.1);
            }
        }
    }
}
@media screen and (max-height: 800px) {
    .login .login-box {
        margin-bottom: 0;
    }
}
</style>