wc24
de18412010
- 覆盖颗粒度只在 3 个入口: router targets / module routes / field registry - 框架内 .vue 之间互相引用全部硬编码静态 import,resolveVue/defineAsyncComponent 退出 .vue 文件 - 修 components/fields/FieldRelativeTime.vue 的 ../VueAdmin → ../../VueAdmin (移动后未跟改)
131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<template>
|
|
<div class="login_bg">
|
|
<LangSwitch class="login-lang" />
|
|
<div class="login_main">
|
|
<div class="login-form">
|
|
<div class="login-header">
|
|
<div class="logo">
|
|
<label>{{ vueAdmin.adminConfig.title || 'Admin' }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
|
|
<el-form-item prop="user">
|
|
<el-input v-model="form.user" prefix-icon="el-icon-user" clearable
|
|
:placeholder="$t('login.userPlaceholder')">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
|
|
:placeholder="$t('login.PWPlaceholder')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" style="width: 100%" :loading="info.islogin" round @click="login">{{
|
|
$t("login.signIn") }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { vueAdmin } from "../VueAdmin";
|
|
import { reactive, computed, onMounted } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import LangSwitch from "./ShrimpLangSwitch.vue";
|
|
|
|
vueAdmin.token = null;
|
|
|
|
let { t } = useI18n();
|
|
|
|
let info = reactive({ islogin: false });
|
|
let form = reactive({ user: import.meta.env.DEV ? "admin" : "", password: import.meta.env.DEV ? "admin" : "" });
|
|
let rules = computed(() => ({
|
|
user: [{ required: true, message: t("login.userError"), trigger: "blur" }],
|
|
password: [{ required: true, message: t("login.PWError"), trigger: "blur" }],
|
|
}));
|
|
|
|
// 页面加载时获取后台配置
|
|
onMounted(() => {
|
|
vueAdmin.fetchConfig().then(data => {
|
|
Object.assign(vueAdmin.adminConfig, data)
|
|
}).catch(() => {})
|
|
})
|
|
|
|
function login() {
|
|
info.islogin = true;
|
|
vueAdmin.fetchLogin({ username: form.user, password: form.password })
|
|
.then(async (data) => {
|
|
vueAdmin.token = data.token;
|
|
await vueAdmin.loadUserInfo();
|
|
info.islogin = false;
|
|
vueAdmin.router.push(vueAdmin.getFirstMenuPath());
|
|
})
|
|
.catch((e: any) => {
|
|
console.warn('[Login]', e.message)
|
|
info.islogin = false;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login_bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.login_main {
|
|
flex: 1;
|
|
overflow: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.login-form {
|
|
width: 400px;
|
|
margin: auto;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.login-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.login-header .logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.login-header .logo label {
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.login-lang {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.login-form {
|
|
width: 340px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.login_main {
|
|
display: block;
|
|
}
|
|
|
|
.login-form {
|
|
width: 100%;
|
|
padding: 20px 40px;
|
|
}
|
|
}
|
|
</style>
|