99ditui-admin-ui/src/layout/lockScreen/index.vue

<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>