|
|
@@ -0,0 +1,49 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { useDocDetailStore } from '@/stores/doc-detail';
|
|
|
+import { useSideBarStore } from '@/stores/side-bar';
|
|
|
+import { onMounted, onUnmounted, computed } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import DocCatalog from './components/DocCatalog.vue';
|
|
|
+
|
|
|
+// 当前路由
|
|
|
+const route = useRoute();
|
|
|
+// 左侧边栏状态
|
|
|
+const sideBarStore = useSideBarStore();
|
|
|
+// 文档详情
|
|
|
+const docDetailStore = useDocDetailStore();
|
|
|
+
|
|
|
+const doc = computed(() => docDetailStore.doc);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 收起左侧边栏
|
|
|
+ sideBarStore.setCollapse(true);
|
|
|
+ // 查询文档详情内容
|
|
|
+ const id = parseInt(route.params.id as string);
|
|
|
+ if (id > 0) {
|
|
|
+ docDetailStore.fetch(id);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ sideBarStore.setCollapse(false);
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <a-row type="flex" :gutter="24">
|
|
|
+ <a-col :span="4">
|
|
|
+ <h2>目录</h2>
|
|
|
+ <DocCatalog></DocCatalog>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20">
|
|
|
+ <div v-if="doc" class="doc-wrap">
|
|
|
+ <h2 class="title">{{ doc.title }}</h2>
|
|
|
+ <p>文档详情</p>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <a-empty />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+</template>
|