index.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <div class="vab-nav">
  3. <el-row :gutter="20">
  4. <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
  5. <div class="left-panel">
  6. <vab-fold fold="contract-left-line" unfold="contract-right-line" />
  7. <el-tabs v-if="layout === 'comprehensive'" v-model="tab.data" tab-position="top" @tab-click="handleTabClick">
  8. <template v-for="(item, index) in routes" :key="index + item.name">
  9. <el-tab-pane :name="item.name">
  10. <template #label>
  11. <vab-icon v-if="item.meta.icon" :icon="item.meta.icon" :is-custom-svg="item.meta.isCustomSvg" />
  12. {{ translate(item.meta.title) }}
  13. </template>
  14. </el-tab-pane>
  15. </template>
  16. </el-tabs>
  17. <vab-breadcrumb v-else class="hidden-xs-only" />
  18. </div>
  19. </el-col>
  20. <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
  21. <div class="right-panel">
  22. <vab-right-tools />
  23. </div>
  24. </el-col>
  25. </el-row>
  26. </div>
  27. </template>
  28. <script lang="ts" setup>
  29. import { openFirstMenu } from '/@/config'
  30. import { translate } from '/@/i18n'
  31. import { useRoutesStore } from '/@/store/modules/routes'
  32. import { isExternal } from '/@/utils/validate'
  33. defineOptions({
  34. name: 'VabNav',
  35. })
  36. defineProps({
  37. layout: {
  38. type: String,
  39. default: '',
  40. },
  41. })
  42. const router = useRouter()
  43. const routesStore = useRoutesStore()
  44. const { getTab: tab, getTabMenu: tabMenu, getRoutes: routes } = storeToRefs(routesStore)
  45. const handleTabClick = () => {
  46. nextTick(() => {
  47. if (isExternal(tabMenu.value.path)) {
  48. window.open(tabMenu.value.path)
  49. router.push('/redirect')
  50. } else if (openFirstMenu) router.push(tabMenu.value.redirect || tabMenu.value)
  51. })
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. .vab-nav {
  56. position: relative;
  57. height: var(--el-nav-height);
  58. padding-right: var(--el-padding);
  59. padding-left: var(--el-padding);
  60. overflow: hidden;
  61. user-select: none;
  62. background: var(--el-color-white);
  63. border-bottom: 1px solid var(--el-border-color);
  64. .left-panel {
  65. display: flex;
  66. align-items: center;
  67. justify-items: center;
  68. height: var(--el-nav-height);
  69. :deep() {
  70. .fold-unfold {
  71. margin-right: var(--el-margin);
  72. }
  73. .el-tabs {
  74. width: 100%;
  75. margin-left: var(--el-margin);
  76. .el-tabs__header {
  77. margin: 0;
  78. > .el-tabs__nav-wrap {
  79. display: flex;
  80. align-items: center;
  81. .el-icon-arrow-left,
  82. .el-icon-arrow-right {
  83. font-weight: 600;
  84. color: var(--el-color-grey);
  85. }
  86. }
  87. }
  88. .el-tabs__item {
  89. > div {
  90. display: flex;
  91. align-items: center;
  92. i {
  93. margin-right: 3px;
  94. }
  95. }
  96. }
  97. }
  98. .el-tabs__nav-wrap::after {
  99. display: none;
  100. }
  101. }
  102. }
  103. .right-panel {
  104. display: flex;
  105. align-content: center;
  106. align-items: center;
  107. justify-content: flex-end;
  108. height: var(--el-nav-height);
  109. transition: var(--el-transition);
  110. :deep() {
  111. [class*='ri-'] {
  112. margin-left: var(--el-margin);
  113. color: var(--el-color-grey);
  114. cursor: pointer;
  115. }
  116. button {
  117. [class*='ri-'] {
  118. margin-left: 0;
  119. color: var(--el-color-white);
  120. cursor: pointer;
  121. }
  122. }
  123. }
  124. }
  125. }
  126. </style>