76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
import { nextTick, ref } from 'vue';
|
|
import { useRouter, useRoute } from 'uni-mini-router'
|
|
import { onMounted, computed, watch } from 'vue';
|
|
import { useTabbar } from '@/stores/useTabbar';
|
|
import { useUser } from '@/stores/useUser'; // Import the useUser store
|
|
|
|
const props = defineProps({
|
|
currentName: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
})
|
|
|
|
const router = useRouter()
|
|
const tab = useTabbar()
|
|
const user = useUser() // Get the user store instance
|
|
|
|
// const isFirstTime = ref(true)
|
|
|
|
// onMounted(() => {
|
|
// if (isFirstTime.value) {
|
|
// tab.activeTab = props.currentName
|
|
// isFirstTime.value = false
|
|
// }
|
|
// })
|
|
|
|
const tabWhitelist = ['home', 'progress', 'my']
|
|
|
|
const nameLabelIconMap = {
|
|
home: {
|
|
title: '进度查看',
|
|
icon: 'dashboard',
|
|
roles: ['teacher', 'admin', 'liaison', 'sysadmin'] as const // 使用 as const 来确保类型正确
|
|
},
|
|
progress: {
|
|
title: '进度管理',
|
|
icon: 'transfer',
|
|
roles: ['teacher', 'admin', 'sysadmin'] as const
|
|
},
|
|
my: {
|
|
title: '我的',
|
|
icon: 'user',
|
|
roles: ['teacher', 'admin', 'liaison', 'sysadmin'] as const
|
|
}
|
|
}
|
|
|
|
const tabList = computed(() => {
|
|
// 过滤出当前用户有权限看到的导航项
|
|
return router.routes
|
|
.filter((r: { name: string }) => {
|
|
const config = nameLabelIconMap[r.name as keyof typeof nameLabelIconMap]
|
|
// 检查该路由是否在配置中，且用户是否有权限访问
|
|
return config && config.roles.some(role => user.hasRole(role as "teacher" | "admin" | "liaison" | "sysadmin"))
|
|
})
|
|
.map((route: { name: keyof typeof nameLabelIconMap }) => {
|
|
return {
|
|
name: route.name,
|
|
title: nameLabelIconMap[route.name]?.title,
|
|
icon: nameLabelIconMap[route.name]?.icon
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<wd-tabbar v-model="tab.activeTab" fixed safe-area-inset-bottom bordered placeholder>
|
|
<wd-tabbar-item v-for="(tab, i) in tabList" :name="tab.name" :title="tab.title" :icon="tab.icon" :key="i"
|
|
@tap="router.pushTab({ name: tab.name })" />
|
|
</wd-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|