feat: 重构锁屏功能

src/views/tool/lockScreen/index.vue

@@ -1,28 +1,17 @@
 <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, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { VuePDF, usePDF } from '@tato30/vue-pdf';
-import '@tato30/vue-pdf/style.css';
-import saveAs from 'file-saver';
-import { parseUrlPath } from '@/plugins/file-static-url';
-const { t, currentLocale } = useI18n();
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { message } from 'ant-design-vue/lib';
+const { t } = useI18n();
+const userStore = useUserStore();
 const appStore = useAppStore();
+const maskStore = useMaskStore();
 const route = useRoute();
-
-// 文档地址
-const docUrl = computed(() => {
-  let url = parseUrlPath(appStore.helpDoc);
-  if (url.indexOf('{language}') === -1) {
-    return url;
-  }
-  // 语言参数替换
-  const local = (route.query.language as string) ?? currentLocale.value;
-  const lang = local.split('_')[0];
-  return url.replace('{language}', lang);
-});
-const { pdf, pages } = usePDF(docUrl.value);
+const router = useRouter();
 
 /**
  * 国际化翻译转换
@@ -35,186 +24,176 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
-// annotation层
-function fnAnnotation(obj: any) {
-  const page = obj.data?.referencedPage;
-  if (page && typeof page === 'number') {
-    viewPage.value = page;
-  }
-}
+const password = ref('');
 
-/**视图页数 */
-const viewPage = ref<number>(1);
-function fnToPage(value: number) {
-  if (viewPage.value === value) return;
-  viewPage.value = value;
-}
-
-/**视图缩放 */
-const viewScale = ref<number>(1);
-function fnScaleView(value: number) {
-  viewScale.value += value;
-  if (viewScale.value <= 0.25) {
-    viewScale.value = 0.25;
-    return;
-  }
-  if (viewScale.value > 2) {
-    viewScale.value = 2;
-    return;
-  }
-}
-
-/**文件下载 */
-function fnDownload() {
-  const url = docUrl.value;
-  fetch(url)
-    .then(response => response.blob())
-    .then(blob => {
-      saveAs(blob, t('views.tool.help.fileName'));
-    })
-    .catch(error => {
-      console.error('Error:', error);
-    });
-}
-
-/**系统使用手册跳转 */
-function fnClickHelpDoc() {
-  // 浏览器支持 PDF 预览
-  if (navigator.pdfViewerEnabled) {
-    window.open(docUrl.value, '_blank');
+/**解锁 */
+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 {
-    // 浏览器不支持 PDF 预览
-    alert(t('views.tool.help.pdfViewerErr'));
+    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>
-  <a-row>
-    <a-col :span="24" class="header">
-      <a-space :size="12" align="center">
-        <div class="header-scale">
-          <a-button type="default" shape="circle" @click="fnScaleView(-0.25)">
-            <template #icon><ZoomOutOutlined /></template>
-          </a-button>
-          <span>{{ viewScale * 100 }}%</span>
-          <a-button type="default" shape="circle" @click="fnScaleView(0.25)">
-            <template #icon><ZoomInOutlined /></template>
-          </a-button>
-        </div>
-      </a-space>
-      <a-space :size="12" align="center">
-        <a-button type="default" @click="fnClickHelpDoc()">
-          <template #icon><ToTopOutlined /> </template>
-          {{ t('views.tool.help.pdfViewer') }}
-        </a-button>
-        <a-button type="primary" @click="fnDownload()">
-          <template #icon><DownloadOutlined /></template>
-          {{ t('views.tool.help.download') }}
-        </a-button>
-      </a-space>
-    </a-col>
-    <a-col :span="4" class="left">
-      <template v-for="page in pages" :key="page">
-        <div
-          class="left-view"
-          :class="{ 'left-view_action': page === viewPage }"
-          @click="fnToPage(page)"
-        >
-          <VuePDF :pdf="pdf" :page="page" :scale="0.2" text-layer />
-          <div>{{ page }}</div>
-        </div>
-      </template>
-    </a-col>
-    <a-col :span="20" class="right">
-      <div class="right-view">
-        <a-spin size="large" style="margin: 50%" v-if="pages === 0" />
-        <VuePDF
-          v-else
-          :pdf="pdf"
-          :page="viewPage"
-          :scale="viewScale"
-          annotation-layer
-          :annotations-filter="['Link']"
-          @annotation="fnAnnotation"
-        >
-          <a-spin size="large" style="margin: 50%" />
-        </VuePDF>
-      </div>
-    </a-col>
-  </a-row>
+  <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>
 
-  <!-- <a-spin style="margin: 0 50%" v-if="docUrl === '#'" /> -->
-  <!-- <div :style="'height:' + height" v-else>
-    <iframe
-      :src="docUrl"
-      frameborder="no"
-      style="width: 100%; height: 100%"
-      scrolling="auto"
-    ></iframe>
-  </div> -->
+    <!-- 锁屏-登录 -->
+    <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>
+          <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="text" class="logout" @click="handleBackLogin">
+          {{ t('components.LockScreen.backLogin') }}
+        </a-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped>
-.header {
+.lock-screen_login {
   display: flex;
-  justify-content: space-between;
-  padding: 12px 24px;
-  background-color: #323639;
-  color: white;
-  &-scale {
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+
+  &-user {
     display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    width: 140px;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    & > span {
-      font-weight: 600;
+    .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);
+      }
     }
   }
 }
 
-.left {
-  overflow-y: auto;
-  height: calc(100vh - 56px);
-  padding: 20px 0;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: center;
-  background-color: #323639;
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 164px;
 
-  &-view {
-    text-align: center;
-    width: 160px;
-    padding: 10px 20px;
-    border: 4px transparent solid;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    color: white;
-    transform: border;
+  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;
+    }
   }
-
-  &-view_action {
-    border: 4px #8ab4f8 solid;
-  }
-}
-
-.right {
-  overflow-y: auto;
-  height: calc(100vh - 56px);
-  background-color: #525659;
-
-  &-view {
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
+  @keyframes slashStar {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
   }
 }
 </style>