From 9d960ed0058f9087f49e9741a9af06c3f9116eb0 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期六, 19 四月 2025 11:23:02 +0800
Subject: [PATCH] feat(auth): 添加 Keycloak 认证支持
---
zhitan-vue/src/views/login.vue | 74 +++++++++++++++++++++++-------------
1 files changed, 47 insertions(+), 27 deletions(-)
diff --git a/zhitan-vue/src/views/login.vue b/zhitan-vue/src/views/login.vue
index 3e8b868..f519cf7 100644
--- a/zhitan-vue/src/views/login.vue
+++ b/zhitan-vue/src/views/login.vue
@@ -11,8 +11,8 @@
<div class="middle-view">
<div class="left-wrapper">
<div class="login-font">{{ systemInfo.systemName || "" }}</div>
- <img src="@/assets/images/font01.png" alt="" style="width: 406px" />
- <img src="@/assets/images/img_logo.png" alt="" style="width: 200px; margin-top: 20px" />
+ <img src="@/assets/images/font01.png" alt="" style="width: 380px" />
+ <img src="@/assets/images/img_logo.png" alt="" style="width: 180px; margin-top: 20px" />
</div>
<div class="right-wrapper">
<div class="header">
@@ -44,7 +44,7 @@
size="large"
auto-complete="off"
placeholder="楠岃瘉鐮�"
- style="width: 266px"
+ style="width: 230px"
@keyup.enter="handleLogin"
>
<!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> -->
@@ -83,10 +83,11 @@
</template>
<script setup>
-import { getCodeImg } from "@/api/login"
+import { getCodeImg, authBinding } from "@/api/login"
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from "@/store/modules/user"
+import {ElMessage} from "element-plus";
const userStore = useUserStore()
const route = useRoute()
@@ -125,13 +126,13 @@
const register = ref(false)
const redirect = ref(undefined)
-watch(
- route,
- (newRoute) => {
- redirect.value = newRoute.query && newRoute.query.redirect
- },
- { immediate: true }
-)
+// watch(
+// route,
+// (newRoute) => {
+// redirect.value = newRoute.query && newRoute.query.redirect
+// },
+// { immediate: true }
+// )
function handleLogin() {
proxy.$refs.loginRef.validate((valid) => {
@@ -193,8 +194,27 @@
}
}
+/**
+ * 绗笁鏂圭櫥褰�
+ * @param type
+ */
+const doSocialLogin = () => {
+ console.log("doSocialLogin")
+ authBinding().then((res) => {
+ console.log(res);
+ if (res.code === 200) {
+ // 鑾峰彇鎺堟潈鍦板潃璺宠浆
+ window.location.href = res.data;
+ } else {
+ ElMessage.error(res.msg);
+ }
+ });
+};
+// 闈炲崟鐐圭櫥褰曟斁寮�涓嬭竟涓よ锛屽惁鍒欐敞閲婃帀
getCode()
getCookie()
+// 鍗曠偣鐧诲綍鏀惧紑涓嬭竟涓�琛岋紝鍚﹀垯娉ㄩ噴鎺�
+// doSocialLogin()
</script>
<style lang="scss" scoped>
@@ -202,7 +222,7 @@
display: flex;
align-items: center;
height: 100%;
- background-image: url("@/assets/images/login-background.png");
+ background-image: url("@/assets/images/login-background.jpg");
background-repeat: no-repeat;
background-size: cover;
flex-direction: column;
@@ -223,31 +243,31 @@
flex-direction: column;
}
.login-font {
- font-size: 34px;
+ font-size: 32px;
font-weight: 700;
color: #d5f8ff;
- margin-bottom: 12px;
+ margin-bottom: 10px;
}
}
.right-wrapper {
border-radius: 23px;
background: #ffffff;
- width: 480px;
+ width: 410px;
position: relative;
.header {
- height: 70px;
- line-height: 70px;
+ height: 56px;
+ line-height: 56px;
border-bottom: 1px solid #f1f1f1;
color: #3b3b3b;
- font-size: 22px;
+ font-size: 18px;
margin-bottom: 22px;
span {
display: inline-block;
- height: 70px;
- line-height: 70px;
- border-bottom: 6px solid #3a83fc;
- margin-left: 50px;
+ height: 56px;
+ line-height: 62px;
+ border-bottom: 4px solid #3a83fc;
+ margin-left: 32px;
}
}
}
@@ -277,14 +297,14 @@
}
.login-form {
- padding: 0 50px 30px;
+ padding: 0 32px 20px;
.submit-btn {
- width: 382px;
- height: 54px;
+ width: 360px;
+ height: 44px;
background: #3a83fc;
border-radius: 3px;
- font-size: 20px;
+ font-size: 18px;
box-shadow: 1px 2px 5px #3a83fc;
border: none;
border-radius: 6px;
@@ -342,7 +362,7 @@
text-align: center;
color: #fff;
font-family: Arial;
- font-size: 16px;
+ font-size: 14px;
letter-spacing: 1px;
}
</style>
--
Gitblit v1.9.3