ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initHeader

Browse Source
This commit is contained in:
hongawen
2024-08-22 11:27:06 +08:00
parent fe895bd37c
commit e0aaa7a30d
178 changed files with 5726 additions and 4999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/views/Login.vue
View File

@@ -1,119 +0,0 @@
<template>
<div ref="loginContent" class="login">
<div class="login_form">
<div class="login_form_title">自动检测平台</div>
<el-form :model="LoginForm" :rules="rules" ref="formRef">
<el-form-item label="" prop="loginUserName">
<el-input
v-model="LoginForm.loginUserName"
:prefix-icon="Avatar"
placeholder="请输入账户"
></el-input>
</el-form-item>
<el-form-item label="" prop="loginUserPassword">
<el-input
v-model="LoginForm.loginUserPassword"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
</el-form>
<el-button
type="primary"
@click="handleLogin"
style="width: 100%"
:loading="loginLoading"
>登 录</el-button
>
</div>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "CustomLogin",
});
import { ref, onMounted } from "vue";
const router = useRouter();
import { useRouter } from "vue-router";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { useUserInfoStore } from "@/stores/modules/user";
const userInfoStore = useUserInfoStore();
const rules = {
loginUserName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
loginUserPassword: [
{ required: true, message: "请输入密码", trigger: "blur" },
],
};
const loginLoading = ref(false);
const LoginForm = ref({
loginUserName: "",
loginUserPassword: "",
});
let loginContent = ref();
const formRef = ref();
const handleLogin = () => {
formRef.value.validate((validate: any) => {
if (validate) {
loginLoading.value = true;
if (LoginForm.value.loginUserName && LoginForm.value.loginUserPassword) {
setTimeout(() => {
router.push({
path: "/home",
query: {
name: LoginForm.value.loginUserName,
},
});
userInfoStore.dataFill({ loginName: LoginForm.value.loginUserName });
console.log(userInfoStore.loginName)
}, 1500);
}
}
});
};
</script>
<style scoped lang="scss">
.login {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10%;
background: #0b47a1 url("../assets/images/login/background.png") no-repeat left center;
background-size: auto;
.login_form {
width: 30rem;
height: 27rem;
cursor: pointer;
border-radius: 12px;
box-shadow: 6px 6px 10px #000;
background-color: #fff;
border: 1px solid #eee;
padding: 10px 20px 10px;
.login_form_title {
width: 100%;
height: 4rem;
font-size: 32px;
text-align: center;
padding: 5px 0;
font-family: "DongFangDaKai";
letter-spacing: 4px;
margin-bottom: 40px;
}
.el-button {
margin-top: 10px;
}
}
}
:deep(.el-input){
outline: none !important;
border: 0 !important;
}
</style>

2
frontend/src/views/dashboard/index.vue
View File

@@ -29,8 +29,6 @@ import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/modules/user";
import { ElMessage } from "element-plus";
const user = useUserInfoStore();
const activeIndex = ref("1-1");
const router = useRouter();
const modeList = [
{

116
frontend/src/views/login/components/LoginForm.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
<template #prefix>
<el-icon class="el-input__icon">
<user />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" placeholder="密码：123456" show-password autocomplete="new-password">
<template #prefix>
<el-icon class="el-input__icon">
<lock />
</el-icon>
</template>
</el-input>
</el-form-item>
</el-form>
<div class="login-btn">
<el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
<el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
登录
</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config";
import { getTimeState } from "@/utils";
import { Login } from "@/api/interface";
import { ElNotification } from "element-plus";
import { loginApi } from "@/api/modules/login";
import { useUserStore } from "@/stores/modules/user";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
import md5 from "md5";
const router = useRouter();
const userStore = useUserStore();
const tabsStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
username: "",
password: ""
});
// login
const login = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async valid => {
if (!valid) return;
loading.value = true;
try {
// 1.执行登录接口
const { data } = await loginApi({ ...loginForm, password: md5(loginForm.password) });
userStore.setToken(data.accessToken);
// 2.添加动态路由
await initDynamicRouter();
// 3.清空 tabs、keepAlive 数据
tabsStore.setTabs([]);
keepAliveStore.setKeepAliveName([]);
// 4.跳转到首页
router.push(HOME_URL);
ElNotification({
title: getTimeState(),
message: "登录成功",
type: "success",
duration: 3000
});
} finally {
loading.value = false;
}
});
};
// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
onMounted(() => {
// 监听 enter 事件（调用登录）
document.onkeydown = (e: KeyboardEvent) => {
e = (window.event as KeyboardEvent) || e;
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
if (loading.value) return;
login(loginFormRef.value);
}
};
});
</script>
<style scoped lang="scss">
@import "../index.scss";
</style>

83
frontend/src/views/login/index.scss Normal file
View File

@@ -0,0 +1,83 @@
.login-container {
height: 100%;
min-height: 550px;
background-color: #eeeeee;
background-image: url("@/assets/images/login_bg.svg");
background-size: 100% 100%;
background-size: cover;
.login-box {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
width: 96.5%;
height: 94%;
padding: 0 50px;
background-color: rgb(255 255 255 / 80%);
border-radius: 10px;
.dark {
position: absolute;
top: 13px;
right: 18px;
}
.login-left {
width: 800px;
margin-right: 10px;
.login-left-img {
width: 100%;
height: 100%;
}
}
.login-form {
width: 420px;
padding: 50px 40px 45px;
background-color: var(--el-bg-color);
border-radius: 10px;
box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
.login-logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 45px;
.login-icon {
width: 60px;
height: 52px;
}
.logo-text {
padding: 0 0 0 25px;
margin: 0;
font-size: 42px;
font-weight: bold;
color: #34495e;
white-space: nowrap;
}
}
.el-form-item {
margin-bottom: 40px;
}
.login-btn {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 40px;
white-space: nowrap;
.el-button {
width: 185px;
}
}
}
}
}
@media screen and (width <= 1250px) {
.login-left {
display: none;
}
}
@media screen and (width <= 600px) {
.login-form {
width: 97% !important;
}
}

26
frontend/src/views/login/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="login-container flx-center">
<div class="login-box">
<SwitchDark class="dark" />
<div class="login-left">
<img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
</div>
<div class="login-form">
<div class="login-logo">
<img class="login-icon" src="@/assets/images/logo.svg" alt="" />
<h2 class="logo-text">Geeker-Admin</h2>
</div>
<LoginForm />
</div>
</div>
</div>
</template>
<script setup lang="ts" name="login">
import LoginForm from "./components/LoginForm.vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>