🔱: [client] sync upgrade with 21 commits [trident-sync]
'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md' !42 修复 工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复 工作流无法添加新节点问题 1. 修复 工作流无法添加新节点问题 2. 修复 左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
This commit is contained in:
H0nGzA1
352
web/src/layout/lockScreen/index.vue
Normal file
352
web/src/layout/lockScreen/index.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div v-show="state.isShowLockScreen">
|
||||
<div class="layout-lock-screen-mask"></div>
|
||||
<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
|
||||
<div class="layout-lock-screen">
|
||||
<div
|
||||
class="layout-lock-screen-date"
|
||||
ref="layoutLockScreenDateRef"
|
||||
@mousedown="onDownPc"
|
||||
@mousemove="onMovePc"
|
||||
@mouseup="onEnd"
|
||||
@touchstart.stop="onDownApp"
|
||||
@touchmove.stop="onMoveApp"
|
||||
@touchend.stop="onEnd"
|
||||
>
|
||||
<div class="layout-lock-screen-date-box">
|
||||
<div class="layout-lock-screen-date-box-time">
|
||||
{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
|
||||
</div>
|
||||
<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
|
||||
</div>
|
||||
<div class="layout-lock-screen-date-top">
|
||||
<SvgIcon name="ele-Top" />
|
||||
<div class="layout-lock-screen-date-top-text">上滑解锁</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
|
||||
<div class="layout-lock-screen-login-box">
|
||||
<div class="layout-lock-screen-login-box-img">
|
||||
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
|
||||
</div>
|
||||
<div class="layout-lock-screen-login-box-name">Administrator</div>
|
||||
<div class="layout-lock-screen-login-box-value">
|
||||
<el-input
|
||||
placeholder="请输入密码"
|
||||
ref="layoutLockScreenInputRef"
|
||||
v-model="state.lockScreenPassword"
|
||||
@keyup.enter.native.stop="onLockScreenSubmit()"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="onLockScreenSubmit">
|
||||
<el-icon class="el-input__icon">
|
||||
<ele-Right />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-lock-screen-login-icon">
|
||||
<SvgIcon name="ele-Microphone" :size="20" />
|
||||
<SvgIcon name="ele-AlarmClock" :size="20" />
|
||||
<SvgIcon name="ele-SwitchButton" :size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutLockScreen">
|
||||
import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
|
||||
// 定义变量内容
|
||||
const layoutLockScreenDateRef = ref<HtmlType>();
|
||||
const layoutLockScreenInputRef = ref();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive({
|
||||
transparency: 1,
|
||||
downClientY: 0,
|
||||
moveDifference: 0,
|
||||
isShowLoockLogin: false,
|
||||
isFlags: false,
|
||||
querySelectorEl: '' as HtmlType,
|
||||
time: {
|
||||
hm: '',
|
||||
s: '',
|
||||
mdq: '',
|
||||
},
|
||||
setIntervalTime: 0,
|
||||
isShowLockScreen: false,
|
||||
isShowLockScreenIntervalTime: 0,
|
||||
lockScreenPassword: '',
|
||||
});
|
||||
|
||||
// 鼠标按下 pc
|
||||
const onDownPc = (down: MouseEvent) => {
|
||||
state.isFlags = true;
|
||||
state.downClientY = down.clientY;
|
||||
};
|
||||
// 鼠标按下 app
|
||||
const onDownApp = (down: TouchEvent) => {
|
||||
state.isFlags = true;
|
||||
state.downClientY = down.touches[0].clientY;
|
||||
};
|
||||
// 鼠标移动 pc
|
||||
const onMovePc = (move: MouseEvent) => {
|
||||
state.moveDifference = move.clientY - state.downClientY;
|
||||
onMove();
|
||||
};
|
||||
// 鼠标移动 app
|
||||
const onMoveApp = (move: TouchEvent) => {
|
||||
state.moveDifference = move.touches[0].clientY - state.downClientY;
|
||||
onMove();
|
||||
};
|
||||
// 鼠标移动事件
|
||||
const onMove = () => {
|
||||
if (state.isFlags) {
|
||||
const el = <HTMLElement>state.querySelectorEl;
|
||||
const opacitys = (state.transparency -= 1 / 200);
|
||||
if (state.moveDifference >= 0) return false;
|
||||
el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
|
||||
if (state.moveDifference < -400) {
|
||||
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
|
||||
state.moveDifference = -el.clientHeight;
|
||||
setTimeout(() => {
|
||||
el && el.parentNode?.removeChild(el);
|
||||
}, 300);
|
||||
}
|
||||
if (state.moveDifference === -el.clientHeight) {
|
||||
state.isShowLoockLogin = true;
|
||||
layoutLockScreenInputRef.value.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
// 鼠标松开
|
||||
const onEnd = () => {
|
||||
state.isFlags = false;
|
||||
state.transparency = 1;
|
||||
if (state.moveDifference >= -400) {
|
||||
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
|
||||
}
|
||||
};
|
||||
// 获取要拖拽的初始元素
|
||||
const initGetElement = () => {
|
||||
nextTick(() => {
|
||||
state.querySelectorEl = layoutLockScreenDateRef.value;
|
||||
});
|
||||
};
|
||||
// 时间初始化
|
||||
const initTime = () => {
|
||||
state.time.hm = formatDate(new Date(), 'HH:MM');
|
||||
state.time.s = formatDate(new Date(), 'SS');
|
||||
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
|
||||
};
|
||||
// 时间初始化定时器
|
||||
const initSetTime = () => {
|
||||
initTime();
|
||||
state.setIntervalTime = window.setInterval(() => {
|
||||
initTime();
|
||||
}, 1000);
|
||||
};
|
||||
// 锁屏时间定时器
|
||||
const initLockScreen = () => {
|
||||
if (themeConfig.value.isLockScreen) {
|
||||
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
||||
if (themeConfig.value.lockScreenTime <= 1) {
|
||||
state.isShowLockScreen = true;
|
||||
setLocalThemeConfig();
|
||||
return false;
|
||||
}
|
||||
themeConfig.value.lockScreenTime--;
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(state.isShowLockScreenIntervalTime);
|
||||
}
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
themeConfig.value.isDrawer = false;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
// 密码输入点击事件
|
||||
const onLockScreenSubmit = () => {
|
||||
themeConfig.value.isLockScreen = false;
|
||||
themeConfig.value.lockScreenTime = 30;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetElement();
|
||||
initSetTime();
|
||||
initLockScreen();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(state.setIntervalTime);
|
||||
window.clearInterval(state.isShowLockScreenIntervalTime);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-lock-screen-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.layout-lock-screen-filter {
|
||||
filter: blur(1px);
|
||||
}
|
||||
.layout-lock-screen-mask {
|
||||
background: var(--el-color-white);
|
||||
@extend .layout-lock-screen-fixed;
|
||||
z-index: 9999990;
|
||||
}
|
||||
.layout-lock-screen-img {
|
||||
@extend .layout-lock-screen-fixed;
|
||||
background-image: url('https://img-blog.csdnimg.cn/afa9c317667f47d5bea34b85af45979e.png#pic_center');
|
||||
background-size: 100% 100%;
|
||||
z-index: 9999991;
|
||||
}
|
||||
.layout-lock-screen {
|
||||
@extend .layout-lock-screen-fixed;
|
||||
z-index: 9999992;
|
||||
&-date {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--el-color-white);
|
||||
z-index: 9999993;
|
||||
user-select: none;
|
||||
&-box {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 50px;
|
||||
&-time {
|
||||
font-size: 100px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
&-info {
|
||||
font-size: 40px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
&-minutes {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--el-color-white);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 50px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
i {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&-text {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 150%;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-white);
|
||||
left: 50%;
|
||||
line-height: 1.2;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
width: 35px;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
|
||||
color: var(--el-color-white);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
i {
|
||||
transform: translateY(-40px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.layout-lock-screen-date-top-text {
|
||||
opacity: 1;
|
||||
top: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-login {
|
||||
position: relative;
|
||||
z-index: 9999994;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--el-color-white);
|
||||
&-box {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
&-img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
font-size: 26px;
|
||||
margin: 15px 0 30px;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input-group__append) {
|
||||
background: var(--el-color-white);
|
||||
padding: 0px 15px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
border-right-color: var(--el-border-color-extra-light);
|
||||
&:hover {
|
||||
border-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user