feat: 锁屏页面

src/router/index.ts

@@ -93,6 +93,12 @@ const constantRoutes: RouteRecordRaw[] = [
     meta: { title: 'router.quickStart' },
     component: () => import('@/views/system/quick-start/index.vue'),
   },
+  {
+    path: '/lock-screen',
+    name: 'LockScreen',
+    meta: { title: 'router.lockScreen' },
+    component: () => import('@/views/tool/lockScreen/index.vue'),
+  },
   {
     path: '/redirect',
     name: 'Redirect',

src/views/tool/lockScreen/index.vue

@@ -0,0 +1,220 @@
+<script lang="ts" setup>
+import useAppStore from '@/store/modules/app';
+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();
+const appStore = useAppStore();
+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);
+
+/**
+ * 国际化翻译转换
+ */
+function fnLocale() {
+  let title = route.meta.title as string;
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  appStore.setTitle(title);
+}
+
+// annotation层
+function fnAnnotation(obj: any) {
+  const page = obj.data?.referencedPage;
+  if (page && typeof page === 'number') {
+    viewPage.value = page;
+  }
+}
+
+/**视图页数 */
+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');
+  } else {
+    // 浏览器不支持 PDF 预览
+    alert(t('views.tool.help.pdfViewerErr'));
+  }
+}
+
+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>
+
+  <!-- <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> -->
+</template>
+
+<style lang="less" scoped>
+.header {
+  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;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 140px;
+    align-items: center;
+    & > span {
+      font-weight: 600;
+    }
+  }
+}
+
+.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;
+
+  &-view {
+    text-align: center;
+    width: 160px;
+    padding: 10px 20px;
+    border: 4px transparent solid;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    color: white;
+    transform: border;
+  }
+
+  &-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;
+  }
+}
+</style>