DetailView.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <script setup lang="ts">
  2. import { useDocDetailStore } from '@/stores/doc-detail';
  3. import { useSideBarStore } from '@/stores/side-bar';
  4. import { onMounted, onUnmounted, computed } from 'vue';
  5. import { useRoute } from 'vue-router';
  6. import DocCatalog from './components/DocCatalog.vue';
  7. // 当前路由
  8. const route = useRoute();
  9. // 左侧边栏状态
  10. const sideBarStore = useSideBarStore();
  11. // 文档详情
  12. const docDetailStore = useDocDetailStore();
  13. const doc = computed(() => docDetailStore.doc);
  14. onMounted(() => {
  15. // 收起左侧边栏
  16. sideBarStore.setCollapse(true);
  17. // 查询文档详情内容
  18. const id = parseInt(route.params.id as string);
  19. if (id > 0) {
  20. docDetailStore.fetch(id);
  21. }
  22. });
  23. onUnmounted(() => {
  24. sideBarStore.setCollapse(false);
  25. });
  26. </script>
  27. <template>
  28. <a-row type="flex" :gutter="24">
  29. <a-col :span="4">
  30. <h2>目录</h2>
  31. <DocCatalog></DocCatalog>
  32. </a-col>
  33. <a-col :span="20">
  34. <div v-if="doc" class="doc-wrap">
  35. <h2 class="title">{{ doc.title }}</h2>
  36. <p>文档详情</p>
  37. </div>
  38. <div v-else>
  39. <a-empty />
  40. </div>
  41. </a-col>
  42. </a-row>
  43. </template>