NavMenu.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <script setup lang="ts">
  2. import {
  3. FilePptOutlined,
  4. FileSearchOutlined,
  5. NodeIndexOutlined,
  6. LogoutOutlined,
  7. HistoryOutlined,
  8. StarOutlined,
  9. } from '@ant-design/icons-vue';
  10. import { onMounted, ref, watch } from 'vue';
  11. import { useRoute, RouterLink } from "vue-router";
  12. import _ from "lodash";
  13. import { useAuthStore } from '@/stores/auth.store';
  14. import { routeToLogin } from "@/router";
  15. const selectedKeys = ref<string[]>(['/']);
  16. const openKeys = ref<string[]>(['/']);
  17. // 当前路由
  18. const route = useRoute();
  19. // 授权store
  20. const authStore = useAuthStore();
  21. onMounted(() => {
  22. openKeys.value = getOpenKeys(route.path);
  23. selectedKeys.value = [route.path];
  24. watch(
  25. () => route.path,
  26. (path: string) => {
  27. const currentOpenkeys = getOpenKeys(path);
  28. openKeys.value = _.uniq(_.concat(openKeys.value, currentOpenkeys));
  29. }
  30. );
  31. });
  32. function getOpenKeys(path: string): string[] {
  33. const parts = _.dropRight(path.split('/').filter(x => x != '').map(x => '/'+x), 1);
  34. if (parts.length == 0) {
  35. return ["/"];
  36. }
  37. let openKeys = parts.reduce((acc, item) => {
  38. if (acc.length == 0) {
  39. return acc.concat([item]);
  40. }
  41. return acc.concat([acc[acc.length-1] + item]);
  42. }, [] as string[]);
  43. openKeys.unshift("/");
  44. return openKeys;
  45. }
  46. function logout(e: MouseEvent) {
  47. authStore.logout();
  48. routeToLogin();
  49. e.stopPropagation();
  50. }
  51. </script>
  52. <template>
  53. <a-menu
  54. v-model:openKeys="openKeys"
  55. v-model:selectedKeys="selectedKeys"
  56. mode="inline"
  57. >
  58. <a-sub-menu key="/report">
  59. <template #icon>
  60. <FilePptOutlined />
  61. </template>
  62. <template #title>报告管理</template>
  63. <a-menu-item key="/report/index">
  64. <RouterLink to="/report/index">我的报告</RouterLink>
  65. </a-menu-item>
  66. <a-menu-item key="/report/template">
  67. <RouterLink to="/report/template">模板管理</RouterLink>
  68. </a-menu-item>
  69. <a-menu-item key="/report/create">
  70. <RouterLink to="/report/create">创建报告</RouterLink>
  71. </a-menu-item>
  72. </a-sub-menu>
  73. <a-sub-menu key="/search">
  74. <template #icon>
  75. <FileSearchOutlined />
  76. </template>
  77. <template #title>搜索</template>
  78. <a-menu-item key="/search/index">
  79. <RouterLink to="/search/index">智能搜索</RouterLink>
  80. </a-menu-item>
  81. <a-menu-item key="/search/advanced/index">
  82. <RouterLink to="/search/advanced/index">高级搜索</RouterLink>
  83. </a-menu-item>
  84. </a-sub-menu>
  85. <a-sub-menu key="/knowledge-graph">
  86. <template #icon>
  87. <NodeIndexOutlined />
  88. </template>
  89. <template #title>知识导航</template>
  90. <a-menu-item key="/knowledge-graph/search">
  91. <RouterLink to="/knowledge-graph/search">建筑工程科技导航</RouterLink>
  92. </a-menu-item>
  93. </a-sub-menu>
  94. <a-menu-item key="/history">
  95. <template #icon>
  96. <history-outlined />
  97. </template>
  98. <RouterLink to="/history">历史记录</RouterLink>
  99. </a-menu-item>
  100. <a-menu-item key="/favorite">
  101. <template #icon>
  102. <star-outlined />
  103. </template>
  104. <RouterLink to="/favorite">我的收藏</RouterLink>
  105. </a-menu-item>
  106. <a-menu-item key="/logout" @click="logout">
  107. <template #icon>
  108. <logout-outlined />
  109. </template>
  110. 退出系统
  111. </a-menu-item>
  112. </a-menu>
  113. </template>