初始化

2026-03-26 20:18:20 +08:00
commit 120a5b4dfd
368 changed files with 35926 additions and 0 deletions
--- a/src/views/plugin/pdf/index.vue
+++ b/src/views/plugin/pdf/index.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import VuePdfEmbed from 'vue-pdf-embed';
+import { useLoading } from '@sa/hooks';
+
+defineOptions({ name: 'PdfPage' });
+
+const { loading, endLoading } = useLoading(true);
+
+const pdfRef = shallowRef<InstanceType<typeof VuePdfEmbed> | null>(null);
+const source = `https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf`;
+
+const showAllPages = ref(false);
+const currentPage = ref<number>(1);
+const pageCount = ref(1);
+
+function onPdfRendered() {
+  endLoading();
+
+  if (pdfRef.value?.doc) {
+    pageCount.value = pdfRef.value.doc.numPages;
+  }
+}
+
+function showAllPagesChange() {
+  currentPage.value = 1;
+}
+
+const rotations = [0, 90, 180, 270];
+const currentRotation = ref(0);
+
+function handleRotate() {
+  currentRotation.value = (currentRotation.value + 1) % 4;
+}
+
+async function handlePrint() {
+  await pdfRef.value?.print(undefined, 'test.pdf', true);
+}
+
+async function handleDownload() {
+  await pdfRef.value?.download('test.pdf');
+}
+</script>
+
+<template>
+  <div class="overflow-hidden">
+    <ElCard header="PDF 预览" class="h-full card-wrapper" content-class="overflow-hidden">
+      <div class="h-[calc(100%-30px)] flex-col-stretch">
+        <GithubLink link="https://github.com/hrynko/vue-pdf-embed" />
+        <WebSiteLink label="文档地址：" link="https://www.npmjs.com/package/vue-pdf-embed" />
+        <div class="flex-y-center justify-end gap-12px">
+          <ElCheckbox v-model="showAllPages" @change="showAllPagesChange">显示所有页面</ElCheckbox>
+          <ButtonIcon tooltip-content="旋转90度" @click="handleRotate">
+            <icon-material-symbols-light:rotate-90-degrees-ccw-outline-rounded />
+          </ButtonIcon>
+          <ButtonIcon tooltip-content="打印" @click="handlePrint">
+            <icon-mdi:printer />
+          </ButtonIcon>
+          <ButtonIcon tooltip-content="下载" @click="handleDownload">
+            <icon-charm:download />
+          </ButtonIcon>
+        </div>
+        <ElScrollbar class="flex-1-hidden">
+          <NSkeleton v-if="loading" size="small" class="mt-12px" text :repeat="12" />
+          <VuePdfEmbed
+            ref="pdfRef"
+            class="container overflow-auto"
+            :class="{ 'h-0': loading }"
+            :rotation="rotations[currentRotation]"
+            :page="currentPage"
+            :source="source"
+            @rendered="onPdfRendered"
+          />
+        </ElScrollbar>
+        <div class="flex-y-center justify-between">
+          <div v-if="showAllPages" class="text-18px font-medium">共{{ pageCount }}页</div>
+          <ElPagination
+            v-else
+            key="pdf-page"
+            layout="prev, pager, next"
+            background
+            :page-count="pageCount"
+            @current-change="currentPage = $event"
+          />
+        </div>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<style scoped></style>