fe.ems.vue3/src/views/tool/lockScreen/index.vue

<script lang="ts" setup>
import useAppStore from '@/store/modules/app';
import useUserStore from '@/store/modules/user';
import useMaskStore from '@/store/modules/mask';
import useI18n from '@/hooks/useI18n';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
const { t } = useI18n();
const userStore = useUserStore();
const appStore = useAppStore();
const maskStore = useMaskStore();
const route = useRoute();
const router = useRouter();

/**
 * 国际化翻译转换
 */
function fnLocale() {
  let title = route.meta.title as string;
  if (title.indexOf('router.') !== -1) {
    title = t(title);
  }
  appStore.setTitle(title);
}

const password = ref('');

/**解锁 */
function handleUnlock() {
  if (maskStore.lockPasswd === password.value) {
    message.success(t('components.LockScreen.validSucc'), 3);
    password.value = '';
    maskStore.handleMaskType('none');
    const redirectPath = route.query?.redirect || '/index';
    router.push({ path: redirectPath as string });
  } else {
    message.error(t('components.LockScreen.validError'), 3);
  }
}

/**返回登录界面 */
function handleBackLogin() {
  maskStore.handleMaskType('none');
  const redirectPath = route.query?.redirect || '/index';
  userStore
    .fnLogOut()
    .finally(() =>
      router.push({ name: 'Login', query: { redirect: redirectPath } })
    );
}

onMounted(() => {
  fnLocale();
});
</script>

<template>
  <div class="container">
    <section>
      <div class="animation animation1"></div>
      <div class="animation animation2"></div>
      <div class="animation animation3"></div>
      <div class="animation animation4"></div>
      <div class="animation animation5"></div>
    </section>

    <!-- 锁屏-登录 -->
    <div class="lock-screen_login">
      <div class="lock-screen_login-user">
        <a-avatar
          shape="circle"
          :size="100"
          :src="userStore.getAvatar"
          :alt="userStore.userName"
        ></a-avatar>
        <span class="nick">
          {{ userStore.nickName }}
        </span>
      </div>
      <div class="lock-screen_login-from">
        <a-input-group compact v-if="maskStore.lockPasswd">
          <a-input
            type="password"
            v-model:value="password"
            :placeholder="t('components.LockScreen.inputPlacePwd')"
            :maxlength="32"
            style="width: calc(100% - 50px)"
            @keyup.enter="handleUnlock"
          />
          <a-button type="primary" @click="handleUnlock">
            <LoginOutlined />
          </a-button>
        </a-input-group>
        <a-button type="primary" block @click="handleUnlock" v-else>
          {{ t('components.LockScreen.enter') }}
        </a-button>
        
        <a-button type="text" class="logout" @click="handleBackLogin">
          {{ t('components.LockScreen.backLogin') }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.lock-screen_login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;

  &-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .nick {
      font-size: 28px;
      max-width: 164px;
      white-space: nowrap;
      text-align: start;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #fff;
    }
  }

  &-from {
    display: flex;
    flex-flow: column;
    width: 256px;
    margin-top: 30px;

    .logout {
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.85);
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
      &:hover {
        color: var(--ant-primary-color);
      }
    }
  }
}

.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-top: 164px;

  background: url('@/assets/black_dot.png') 0% 0% / 14px 14px repeat;

  // background-image: url(@/assets/background.jpg);
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center center;

  .animation {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1be1f6;

    &.animation1 {
      left: 15%;
      top: 70%;
      animation: slashStar 2s ease-in-out 0.3s infinite;
    }
    &.animation2 {
      left: 34%;
      top: 35%;
      animation: slashStar 2s ease-in-out 1.2s infinite;
    }
    &.animation3 {
      left: 10%;
      top: 8%;
      animation: slashStar 2s ease-in-out 0.5s infinite;
    }
    &.animation4 {
      left: 68%;
      top: 68%;
      animation: slashStar 2s ease-in-out 0.8s infinite;
    }
    &.animation5 {
      left: 87%;
      top: 30%;
      animation: slashStar 2s ease-in-out 1.5s infinite;
    }
  }
  @keyframes slashStar {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
</style>