| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <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>
|