hjq/PixelAI-admin
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.12:新增布局配置自动锁屏界面'

Browse Source
This commit is contained in:
lyt-Top 2021-01-12 22:48:55 +08:00
parent 95a6e1bbb4
commit d16e6c9075
6 changed files with 169 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
vue-admin-wonderful-next/package.json
View File

@ -6,7 +6,7 @@
"build": "vite build"
},
"dependencies": {
"element-plus": "^v1.0.1-beta.23",
"element-plus": "^v1.0.1-beta.24",
"mitt": "^2.1.0",
"sortablejs": "^1.10.2",
"vue": "^3.0.5",

12
vue-admin-wonderful-next/src/App.vue
View File

@ -1,10 +1,10 @@
<template>
<router-view />
<LockScreen />
<LockScreen v-if="getThemeConfig.isLockScreen" />
</template>
<script lang="ts">
import { onBeforeMount } from "vue";
import { onBeforeMount, computed } from "vue";
import { useStore } from "/@/store/index.ts";
import { setIconfont } from "/@/utils/setIconfont.ts";
import LockScreen from "/@/views/layout/lockScreen/index.vue";
@ -13,11 +13,17 @@ export default {
components: { LockScreen },
setup() {
const store = useStore();
console.log(store);
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 设置批量第三方 icon 图标
onBeforeMount(() => {
setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
});
return {
getThemeConfig,
};
},
};
</script>

3
vue-admin-wonderful-next/src/store/index.ts
View File

@ -23,7 +23,8 @@ export interface RootStateTypes {
isFixedHeader: boolean,
isFixedHeaderChange: boolean,
isCollapse1: boolean,
menuWidth1: number,
isLockScreen: boolean,
lockScreenTime: number,
isShowLogo: boolean,
isShowLogoChange: boolean,
isBreadcrumb: boolean,

3
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -20,7 +20,8 @@ export default {
isFixedHeader: false,
isFixedHeaderChange: false,
isCollapse1: false,
menuWidth1: 200,
isLockScreen: false,
lockScreenTime: 30,
isShowLogo: false,
isShowLogoChange: false,
isBreadcrumb: true,

212
vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
View File

@ -1,92 +1,164 @@
<template>
<div class="layout-lock-screen-mask"></div>
<div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
<div class="layout-lock-screen">
<div class="layout-lock-screen-date">
<div class="layout-lock-screen-date-box">
<div class="layout-lock-screen-date-box-time">22:14</div>
<div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
<div v-show="isShowLockScreen">
<div class="layout-lock-screen-mask"></div>
<div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
<div class="layout-lock-screen">
<div class="layout-lock-screen-date" @mousedown="onDown" @mousemove="onMove" @mouseup="onEnd"
@touchstart.stop="onDown" @touchmove.stop="onMove" @touchend.stop="onEnd">
<div class="layout-lock-screen-date-box">
<div class="layout-lock-screen-date-box-time">{{time.hm}}<span
class="layout-lock-screen-date-box-minutes">{{time.s}}</span></div>
<div class="layout-lock-screen-date-box-info">{{time.mdq}}</div>
</div>
</div>
<transition name="el-zoom-in-center">
<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
<div class="layout-lock-screen-login-box">
<div class="layout-lock-screen-login-box-img">
<img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
</div>
<div class="layout-lock-screen-login-box-name">Administrator</div>
<div class="layout-lock-screen-login-box-value">
<el-input placeholder="请输入密码" ref="layoutLockScreenInputRef">
<template #append>
<el-button icon="el-icon-right"></el-button>
</template>
</el-input>
</div>
</div>
<div class="layout-lock-screen-login-icon">
<i class="el-icon-microphone"></i>
<i class="el-icon-alarm-clock"></i>
<i class="el-icon-switch-button"></i>
</div>
</div>
</transition>
</div>
<transition name="el-zoom-in-center">
<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
<div class="layout-lock-screen-login-box">
<div class="layout-lock-screen-login-box-img">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
</div>
<div class="layout-lock-screen-login-box-name">Administrator</div>
<div class="layout-lock-screen-login-box-value">
<el-input placeholder="密码">
<template #append>
<el-button icon="el-icon-right"></el-button>
</template>
</el-input>
</div>
</div>
<div class="layout-lock-screen-login-icon">
<i class="el-icon-microphone"></i>
<i class="el-icon-alarm-clock"></i>
<i class="el-icon-switch-button"></i>
</div>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { nextTick, onMounted, reactive, toRefs } from "vue";
import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
import { useStore } from "/@/store/index.ts";
import { formatDate } from "/@/utils/formatTime.ts";
export default {
name: "layoutLockScreen",
setup() {
const layoutLockScreenInputRef = ref();
const store = useStore();
const state = reactive({
moveDifference: 0,
transparency: 1,
downClientY: 0,
moveDifference: 0,
isShowLoockLogin: false,
isFlags: false,
querySelectorEl: null,
time: {
hm: "",
s: "",
mdq: "",
},
setIntervalTime: null,
isShowLockScreen: false,
isShowLockScreenIntervalTime: null,
});
// 鼠标按下
const onDown = (down) => {
state.isFlags = true;
state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
};
// 鼠标移动
const onMove = (move) => {
if (state.isFlags) {
const el = state.querySelectorEl;
const opacitys = (state.transparency -= 1 / 200);
if (move.touches) {
state.moveDifference = move.touches[0].clientY - state.downClientY;
} else {
state.moveDifference = move.clientY - state.downClientY;
}
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.remove();
}, 300);
}
if (state.moveDifference === -el.clientHeight) {
state.isShowLoockLogin = true;
layoutLockScreenInputRef.value.focus();
}
}
};
// 鼠标松开
const onEnd = () => {
state.isFlags = false;
state.transparency = 1;
if (state.moveDifference >= -400) {
state.querySelectorEl.setAttribute(
"style",
`top:0px;opacity:1;transition:all 0.3s ease;`
);
}
};
// 获取要拖拽的初始元素
const initGetElement = () => {
nextTick(() => {
const el = document.querySelector(".layout-lock-screen-date");
el.onmousedown = (down) => {
document.onmousemove = (move) => {
let opacitys = (state.transparency -= 1 / 200);
state.moveDifference = move.clientY - down.clientY;
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.remove();
}, 300);
}
if (state.moveDifference === -el.clientHeight) {
state.isShowLoockLogin = true;
}
};
document.onmouseup = (seup) => {
state.transparency = 1;
if (state.moveDifference >= -400) {
el.setAttribute(
"style",
`top:0px;opacity:1;transition:all 0.3s ease;`
);
}
document.onmousemove = null;
document.onmouseup = null;
};
};
state.querySelectorEl = document.querySelector(
".layout-lock-screen-date"
);
});
};
// 时间初始化
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 = setInterval(() => {
initTime();
}, 1000);
};
// 锁屏时间定时器
const initLockScreen = () => {
if (store.state.themeConfig.isLockScreen) {
state.isShowLockScreenIntervalTime = setInterval(() => {
if (store.state.themeConfig.lockScreenTime <= 0) {
state.isShowLockScreen = true;
return false;
}
store.state.themeConfig.lockScreenTime--;
}, 1000);
} else {
clearInterval(state.isShowLockScreenIntervalTime);
}
};
onMounted(() => {
initGetElement();
initSetTime();
initLockScreen();
});
onUnmounted(() => {
clearInterval(state.setIntervalTime);
clearInterval(state.isShowLockScreenIntervalTime);
});
return {
layoutLockScreenInputRef,
onDown,
onMove,
onEnd,
...toRefs(state),
};
},
@ -137,6 +209,9 @@ export default {
&-info {
font-size: 40px;
}
&-minutes {
font-size: 16px;
}
}
}
&-login {
@ -190,5 +265,8 @@ export default {
}
::v-deep(.el-input__inner) {
border-right-color: #f6f6f6;
&:hover {
border-color: #f6f6f6;
}
}
</style>

14
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -132,10 +132,16 @@
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt11">
<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="getThemeConfig.menuWidth1" controls-position="right" :min="1" :max="999"
<el-switch v-model="getThemeConfig.isLockScreen"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt11">
<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
size="mini" style="width:90px;">
</el-input-number>
</div>
@ -212,7 +218,7 @@
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
<div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">