458 lines
11 KiB
Vue
458 lines
11 KiB
Vue
<!-- <script setup lang="ts">
|
|
import type { ToolbarType } from './types';
|
|
|
|
import { preferences, usePreferences } from '@vben/preferences';
|
|
|
|
import { Copyright } from '../basic/copyright';
|
|
import AuthenticationFormView from './form.vue';
|
|
import SloganIcon from './icons/slogan.vue';
|
|
import Toolbar from './toolbar.vue';
|
|
|
|
interface Props {
|
|
appName?: string;
|
|
logo?: string;
|
|
pageTitle?: string;
|
|
pageDescription?: string;
|
|
sloganImage?: string;
|
|
toolbar?: boolean;
|
|
copyright?: boolean;
|
|
toolbarList?: ToolbarType[];
|
|
clickLogo?: () => void;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
appName: '',
|
|
copyright: true,
|
|
logo: '',
|
|
pageDescription: '',
|
|
pageTitle: '',
|
|
sloganImage: '',
|
|
toolbar: true,
|
|
toolbarList: () => ['color', 'language', 'layout', 'theme'],
|
|
clickLogo: () => {},
|
|
});
|
|
|
|
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
|
usePreferences();
|
|
</script> -->
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useAuthStore } from '../../../../../apps/web-antd/src/store';
|
|
import { Checkbox } from 'ant-design-vue';
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
|
|
// 响应式数据
|
|
const username = ref('');
|
|
const password = ref('');
|
|
const rememberMe = ref(false);
|
|
|
|
// 页面加载时恢复用户名
|
|
onMounted(() => {
|
|
const savedUser = localStorage.getItem('rememberedUser');
|
|
if (savedUser) {
|
|
username.value = savedUser;
|
|
rememberMe.value = true;
|
|
}
|
|
});
|
|
function getRetUrlParam() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
console.log('urlParams', urlParams);
|
|
return urlParams.get('returl');
|
|
}
|
|
const retUrl: string | null = getRetUrlParam();
|
|
|
|
// 登录逻辑
|
|
const login = () => {
|
|
// 验证输入
|
|
if (!username.value.trim()) {
|
|
alert('请输入用户名');
|
|
return;
|
|
}
|
|
|
|
if (!password.value.trim()) {
|
|
alert('请输入密码');
|
|
return;
|
|
}
|
|
|
|
// 模拟登录请求
|
|
console.log('正在登录...', {
|
|
username: username.value,
|
|
password: password.value,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
alert('登录成功！');
|
|
|
|
// 存储用户名
|
|
if (rememberMe.value) {
|
|
localStorage.setItem('rememberedUser', username.value);
|
|
} else {
|
|
localStorage.removeItem('rememberedUser');
|
|
}
|
|
|
|
// 跳转页面
|
|
router.push('/navigation');
|
|
}, 800);
|
|
};
|
|
const handleAccountLogin = async () => {
|
|
try {
|
|
// const requestParam: any = omit(values, ['code']);
|
|
// 登录
|
|
await authStore.authLogin({
|
|
grantType: 'password',
|
|
password: password.value,
|
|
tenantId: '000000',
|
|
username: username.value,
|
|
retUrl: retUrl,
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-bg">
|
|
<div class="login-bg_1">
|
|
<div class="login-wapter">
|
|
<div class="login-wapter1">欢迎登录</div>
|
|
<div class="login-wapter2">南川区综合服务中心数智平台</div>
|
|
</div>
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<div class="login-form">
|
|
<h3>用户登录</h3>
|
|
<!-- 用户名输入 -->
|
|
<div class="input-group">
|
|
<img
|
|
src="../../../../../apps/web-antd/src/assets/my.png"
|
|
alt="User Icon"
|
|
class="input-icon"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="请输入您的用户名"
|
|
v-model="username"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 密码输入 -->
|
|
<div class="input-group">
|
|
<img
|
|
src="../../../../../apps/web-antd/src/assets/mima.png"
|
|
alt="Password Icon"
|
|
class="input-icon"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="请输入您的密码"
|
|
v-model="password"
|
|
@keyup.enter="handleAccountLogin"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 记住密码 -->
|
|
<!-- <div class="remember-me">
|
|
<Checkbox v-model:checked="rememberMe">记住密码</Checkbox>
|
|
</div> -->
|
|
<!-- 登录按钮 -->
|
|
<button @click="handleAccountLogin">点 击 登 录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-footer">重庆数字南川大数据产业发展有限公司</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
:class="[isDark ? 'dark' : '']"
|
|
class="flex min-h-full flex-1 select-none overflow-x-hidden"
|
|
style="display: none;"
|
|
> -->
|
|
<!--<template v-if="toolbar">
|
|
<slot name="toolbar">
|
|
<Toolbar :toolbar-list="toolbarList" />
|
|
</slot>
|
|
</template>-->
|
|
<!-- 左侧认证面板 -->
|
|
<!--<AuthenticationFormView
|
|
v-if="authPanelLeft"
|
|
class="min-h-full w-2/5 flex-1"
|
|
transition-name="slide-left"
|
|
>
|
|
<template v-if="copyright" #copyright>
|
|
<slot name="copyright">
|
|
<Copyright
|
|
v-if="preferences.copyright.enable"
|
|
v-bind="preferences.copyright"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
</AuthenticationFormView>-->
|
|
|
|
<!-- 头部 Logo 和应用名称 -->
|
|
<!--<div
|
|
v-if="logo || appName"
|
|
class="absolute left-0 top-0 z-10 flex flex-1"
|
|
@click="clickLogo"
|
|
>
|
|
<div
|
|
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
|
|
>
|
|
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
|
|
<p v-if="appName" class="m-0 text-xl font-medium">
|
|
{{ appName }}
|
|
</p>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- 系统介绍 -->
|
|
<!--<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
|
|
<div
|
|
class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
|
|
>
|
|
<div class="login-background absolute left-0 top-0 size-full"></div>
|
|
<div class="flex-col-center -enter-x mr-20 h-full">
|
|
<template v-if="sloganImage">
|
|
<img
|
|
:alt="appName"
|
|
:src="sloganImage"
|
|
class="animate-float h-64 w-2/5"
|
|
/>
|
|
</template>
|
|
<SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
|
|
<div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
|
|
{{ pageTitle }}
|
|
</div>
|
|
<div class="dark:text-muted-foreground mt-2">
|
|
{{ pageDescription }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- 中心认证面板 -->
|
|
<!--<div v-if="authPanelCenter" class="flex-center relative w-full">
|
|
<div class="login-background absolute left-0 top-0 size-full"></div>
|
|
<AuthenticationFormView
|
|
class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
|
|
>
|
|
<template v-if="copyright" #copyright>
|
|
<slot name="copyright">
|
|
<Copyright
|
|
v-if="preferences.copyright.enable"
|
|
v-bind="preferences.copyright"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
</AuthenticationFormView>
|
|
</div>-->
|
|
|
|
<!-- 右侧认证面板 -->
|
|
<!--<AuthenticationFormView
|
|
v-if="authPanelRight"
|
|
class="min-h-full w-[34%] flex-1"
|
|
>
|
|
<template v-if="copyright" #copyright>
|
|
<slot name="copyright">
|
|
<Copyright
|
|
v-if="preferences.copyright.enable"
|
|
v-bind="preferences.copyright"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
</AuthenticationFormView>-->
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<!-- <style scoped>
|
|
.login-background {
|
|
background: linear-gradient(
|
|
154deg,
|
|
#07070915 30%,
|
|
hsl(var(--primary) / 30%) 48%,
|
|
#07070915 64%
|
|
);
|
|
filter: blur(100px);
|
|
}
|
|
|
|
.dark {
|
|
.login-background {
|
|
background: linear-gradient(
|
|
154deg,
|
|
#07070915 30%,
|
|
hsl(var(--primary) / 20%) 48%,
|
|
#07070915 64%
|
|
);
|
|
filter: blur(100px);
|
|
}
|
|
}
|
|
</style> -->
|
|
<style scoped>
|
|
@font-face {
|
|
font-family: 'BaiduVariety';
|
|
src: url('../../../../../apps/web-antd/src/assets/fonts/百度综艺简体.ttf')
|
|
format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
.login-bg {
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background:
|
|
/* url('../../../../../apps/web-antd/src/assets/juxing.png') no-repeat center center fixed, */ url('../../../../../apps/web-antd/src/assets/222.png')
|
|
no-repeat center center fixed;
|
|
background-size:
|
|
100% 100%,
|
|
100% 100%;
|
|
/* background-repeat: no-repeat, no-repeat;
|
|
background-position: center center, center center; */
|
|
color: #fff;
|
|
}
|
|
.login-wapter {
|
|
position: relative;
|
|
top: -115px; /* 负值越大，越往上 */
|
|
.login-wapter1 {
|
|
font-size: 44px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.login-wapter2 {
|
|
font-size: 60px;
|
|
/* margin-bottom: 38px; */
|
|
background: linear-gradient(to bottom, #ffffff, #cbeaff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: 'BaiduVariety', sans-serif;
|
|
letter-spacing: 6px;
|
|
}
|
|
}
|
|
.login-bg_1 {
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
background: url('../../../../../apps/web-antd/src/assets/from.png') no-repeat
|
|
center center fixed;
|
|
}
|
|
.login-form {
|
|
border-radius: 10px;
|
|
/* margin-top: 2rem; */
|
|
/* padding: 0 45px 45px 45px; */
|
|
height: 400px;
|
|
width: 397px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.login-form h3 {
|
|
font-size: 26px;
|
|
margin-bottom: 40px;
|
|
color: #fff;
|
|
}
|
|
|
|
.login-form input {
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #fff; /* 设置边框线为白色 */
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
border: 0;
|
|
outline: none;
|
|
-webkit-text-fill-color: #fff;
|
|
}
|
|
input:-webkit-autofill {
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
.login-form label {
|
|
display: flex;
|
|
text-align: left;
|
|
margin-top: 5px;
|
|
margin-left: 7px;
|
|
font-size: 16px;
|
|
color: #eee;
|
|
}
|
|
|
|
.login-form button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background-color: #19dcf8;
|
|
color: #0254a5;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
margin-top: 70px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.login-form button:hover {
|
|
background-color: #00aaff;
|
|
}
|
|
|
|
.remember-me {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 25px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: #eee;
|
|
}
|
|
|
|
/* 新增 .input-group 样式 */
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-icon {
|
|
padding: 0px 10px 10px 10px;
|
|
pointer-events: none; /* 确保用户不能点击图标 */
|
|
position: absolute;
|
|
/* top: 17px; */
|
|
left: 0;
|
|
}
|
|
|
|
.login-form input {
|
|
height: 40px;
|
|
line-height: 40px; /* 必须与 height 一致 */
|
|
padding-left: 33px;
|
|
border: 0.1px solid rgba(255, 255, 255, 0.44);
|
|
outline: none;
|
|
background-color: transparent;
|
|
color: #fff;
|
|
}
|
|
.login-form input::placeholder {
|
|
color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
|
|
}
|
|
.login-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
}
|
|
</style>
|