|
|
@@ -1,9 +1,9 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, onUnmounted, computed } from 'vue';
|
|
|
+import { onMounted, onUnmounted, computed, ref } from 'vue';
|
|
|
import { useDocDetailStore } from '@/stores/doc-detail';
|
|
|
import { useSideBarStore } from '@/stores/side-bar';
|
|
|
import { useRoute } from 'vue-router';
|
|
|
-import DocCatalog from './components/DocCatalog.vue';
|
|
|
+import PaperSection from './components/PaperSection.vue';
|
|
|
|
|
|
// 当前路由
|
|
|
const route = useRoute();
|
|
|
@@ -12,35 +12,48 @@ const sideBarStore = useSideBarStore();
|
|
|
// 文档详情
|
|
|
const docDetailStore = useDocDetailStore();
|
|
|
|
|
|
-const doc = computed(() => docDetailStore.doc);
|
|
|
+const detail = computed(() => docDetailStore.detail)
|
|
|
+const pdfPath = computed(() => docDetailStore.pdfUrl)
|
|
|
+const pdfPage = ref(1)
|
|
|
+
|
|
|
+function onSubSectionClick(page: number) {
|
|
|
+ console.log('page', page)
|
|
|
+ pdfPage.value = page
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
// 收起左侧边栏
|
|
|
sideBarStore.setCollapse(true);
|
|
|
// 查询文档详情内容
|
|
|
- const id = route.params.id;
|
|
|
+ const id = parseInt(route.params.id as string);
|
|
|
if (id) {
|
|
|
docDetailStore.fetch(id);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-const catalog = computed(() => docDetailStore.catalog);
|
|
|
-
|
|
|
onUnmounted(() => {
|
|
|
sideBarStore.setCollapse(false);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <a-row type="flex" :gutter="24">
|
|
|
+ <a-row type="flex" :gutter="24" class="detail-view">
|
|
|
<a-col :span="5">
|
|
|
<h2>目录</h2>
|
|
|
- <DocCatalog :catalog="catalog"></DocCatalog>
|
|
|
+ <PaperSection :data="detail?.sections" @sub-section-click="onSubSectionClick" />
|
|
|
</a-col>
|
|
|
<a-col :span="19">
|
|
|
- <div v-if="doc" class="doc-wrap">
|
|
|
- <h2 class="title">{{ doc.title }}</h2>
|
|
|
- <p>文档详情</p>
|
|
|
+ <div v-if="detail?.filePath" class="doc-wrap">
|
|
|
+ <!-- <h1 class="title">{{ detail.title }}</h1> -->
|
|
|
+ <iframe
|
|
|
+ v-if="pdfPath"
|
|
|
+ :src="pdfPath + '&page=' + pdfPage + '#page=' + pdfPage"
|
|
|
+ type="application/pdf"
|
|
|
+ frameborder="0"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ class="pdf-viewer"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<a-empty />
|
|
|
@@ -48,3 +61,20 @@ onUnmounted(() => {
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@import "@/assets/base.scss";
|
|
|
+
|
|
|
+.detail-view {
|
|
|
+ margin-top: 24px;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .doc-wrap {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .pdf-viewer {
|
|
|
+ border: 1px solid $border-color-secondary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|