提交 6efb935a 编写于 作者: RedPig97's avatar RedPig97

update: 更新

上级 40c82b56
<script setup lang="ts">
import { toggleFullScreen } from '@core';
import { IParam, toggleFullScreen } from '@core';
import { FullscreenOutlined, FullscreenExitOutlined, LockOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
import type { FormInstance } from 'ant-design-vue';
import { Ref } from 'vue';
import { getCookie } from 'qx-util';
import { useRoute, useRouter } from 'vue-router';
/**
* 路由对象
*
* @type {*}
* @memberof Login
*/
const route = useRoute();
/**
* 路由器对象
*
* @type {*}
* @memberof Login
*/
const router = useRouter();
let isFullScreen: Ref<boolean> = ref(false);
let isLockScreen: Ref<boolean> = ref(false);
const formRef = ref<FormInstance>();
const lockFormState = reactive<IParam>({
lockPassword: '',
});
const dropdownClick = (value: any) => {
const { key } = value;
// todo
switch (key) {
case 'fullScreen':
isFullScreen.value = toggleFullScreen();
break;
case 'screenLock':
break;
case 'changeTheme':
break;
case 'updatePwd':
isLockScreen.value = !isLockScreen.value;
break;
case 'logout':
handleLogout();
break;
}
};
const handleLogout = async () => {
const result: any = await App.getAppAuthService().logout();
const { status, data } = result;
if (status == 200) {
router.push({ path: '/login' });
} else {
App.getNotificationService().error({ message: '登出失败', description: data?.message || '' });
}
}
const handleLock = async () => {
try {
if (formRef && formRef.value) {
await formRef.value.validateFields();
const username = getCookie('username') || 'visitor';
const lockPath = window.btoa(route.path);
sessionStorage.setItem('lockPassword',lockFormState.lockPassword);
sessionStorage.setItem('lockState','true');
sessionStorage.setItem('userName',username);
sessionStorage.setItem('lockPath',lockPath);
router.push({ path: "/lock" });
}
} catch (errorInfo) {
}
};
/**
* 用户数据
......@@ -40,7 +84,6 @@ const user: any = {
onMounted(() => {
// initUser todo
});
</script>
<template>
......@@ -55,11 +98,29 @@ onMounted(() => {
<template #overlay>
<a-menu @click="dropdownClick">
<a-menu-item value="fullScreen" key="fullScreen">
<fullscreen-outlined v-show="!isFullScreen" class="app-user-icon"/>
<fullscreen-exit-outlined v-show="isFullScreen" class="app-user-icon"/>应用全屏
<fullscreen-outlined v-show="!isFullScreen" class="app-user-icon" />
<fullscreen-exit-outlined v-show="isFullScreen" class="app-user-icon" />
应用全屏
</a-menu-item>
<a-menu-item value="screenLock" key="screenLock">
<lock-outlined class="app-user-icon" />
应用屏锁
<a-modal v-model:visible="isLockScreen" title="请输入锁屏密码" class="app-lock">
<a-form :model="lockFormState" ref="formRef">
<a-form-item name="lockPassword" :rules="[{ required: true, message: '请输入锁屏密码' }]">
<a-input-password v-model:value="lockFormState.lockPassword" placeholder="请输入锁屏密码" />
</a-form-item>
</a-form>
<template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
<template #footer>
<a-button type="primary" @click="handleLock">确认</a-button>
</template>
</a-modal>
</a-menu-item>
<a-menu-item value="logout" key="logout">
<poweroff-outlined class="app-user-icon" />
退出登录
</a-menu-item>
<a-menu-item value="screenLock" key="screenLock"><lock-outlined class="app-user-icon"/>应用屏锁</a-menu-item>
<a-menu-item value="logout" key="logout"><poweroff-outlined class="app-user-icon"/>退出登录</a-menu-item>
</a-menu>
</template>
</a-dropdown>
......
<template>
<div class="app-lock">
<img src="@/assets/img/lock_login.png" class="app-lock__img" />
<div class="app-lock__content">
<h3 class="title">{{ username }}</h3>
<a-space :size="0">
<a-input v-model:value="curPassword" type="password" placeholder="请输入解锁密码" />
<a-button class="lock-button" @click="handleLogin"><unlock-outlined /></a-button>
<a-button class="logout-button" @click="handleLogout"><poweroff-outlined /></a-button>
</a-space>
</div>
</div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { UnlockOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const username: Ref<string> = ref('');
const lockPassword: Ref<string> = ref('');
const lockPath: Ref<string> = ref('');
let curPassword: Ref<string> = ref('');
const handleLogin = () => {
if (unref(curPassword) == unref(lockPassword)) {
sessionStorage.removeItem('lockPassword');
sessionStorage.removeItem('lockState');
sessionStorage.removeItem('userName');
sessionStorage.removeItem('lockPath');
router.push({ path: unref(lockPath) });
} else {
App.getNotificationService().error({ message: '解锁失败', description: '解锁密码错误,请重新输入' });
}
}
const handleLogout = async () => {
const result: any = await App.getAppAuthService().logout();
const { status, data } = result;
if (status == 200) {
router.push({ path: '/login' });
} else {
App.getNotificationService().error({ message: '登出失败', description: data?.message || '' });
}
}
onMounted(() => {
username.value = sessionStorage.getItem('userName') || '';
lockPassword.value = sessionStorage.getItem('lockPassword') || '';
lockPath.value = window.atob(sessionStorage.getItem('lockPath') || '');
});
</script>
......@@ -130,21 +130,6 @@ const route = useRoute();
*/
const router = useRouter();
/**
* 消除loadding
*
* @type {*}
* @memberof Login
*/
onMounted(() => {
setTimeout(() => {
const el = document.getElementById('app-loading-x');
if (el) {
el.style.display = 'none';
}
}, 300);
});
/**
* 重置
*
......@@ -161,7 +146,7 @@ const goReset = () => {
* @type {*}
* @memberof Login
*/
const handleSubmit = (): void => {
const handleSubmit = async (): Promise<void> => {
const form = unref(loginForm);
let validatestate: boolean = true;
form.validate((valid: boolean) => {
......@@ -170,18 +155,14 @@ const handleSubmit = (): void => {
if (!validatestate) {
return;
}
App.getAppAuthService()
.login(loginState)
.then((res: any) => {
const result: any = await App.getAppAuthService().login(loginState);
const { status, data } = result;
if (status == 200) {
const url: any = unref(route).query?.redirecrt ? unref(route).query.redirecrt : '/';
router.push({ path: url });
})
.catch((error: any) => {
const data = error.data;
if (data) {
App.getNotificationService().error({ message: '登录失败', description: data.message || '' });
} else {
App.getNotificationService().error({ message: '登录失败', description: data?.message || '' });
}
});
};
/**
......
......@@ -41,4 +41,11 @@ export interface IAppAuthService {
*/
login(opts: IParam): Promise<IParam>;
/**
* @description 登出
* @return {*} {Promise<IParam>}
* @memberof IAppAuthService
*/
logout(): Promise<IParam>;
}
\ No newline at end of file
......@@ -178,7 +178,7 @@ export abstract class AppAuthServiceBase implements IAppAuthService {
return result;
}
} catch (error: any) {
throw error;
return error;
}
}
......@@ -194,9 +194,9 @@ export abstract class AppAuthServiceBase implements IAppAuthService {
const { status, data } = result;
if (status === 200) {
this.clearAppData();
return data;
return result;
} else {
return data;
return result;
}
} catch (error: any) {
return error;
......
......@@ -67,6 +67,11 @@ const routes = [
name: 'login',
component: () => import("@components/common/login.vue")
},
{
path: '/lock',
name: 'lock',
component: () => import('@components/common/lock.vue'),
},
{
path: '/:pathMatch(.*)',
redirect: '/404'
......
......@@ -4,3 +4,4 @@
@use './app-quick-group.scss';
@use './app-menu-center.scss';
@use './app-user.scss';
@use './lock.scss';
\ No newline at end of file
.app-lock {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.app-lock__content {
.ant-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.lock-button {
border-left: 0;
border-right: 0;
border-radius: 0;
}
.logout-button {
border-left: 0;
border-radius: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.ant-btn:hover, .ant-btn:focus {
color: rgba(0, 0, 0, 0.85);
border-color: #d9d9d9;
}
}
.app-lock__img {
position: absolute;
width: 100%;
height: 100%;
}
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册