Mars
567ec9ec8a
新增多角色权限控制（赛事/财务/客服管理员），支持员工 CRUD、路由菜单按权限显隐、审计日志范围过滤；登录返回角色与权限列表。玩家端赛事列表增加静默刷新避免图片闪烁。Seed 补充演示员工账号与充值相关权限。附带 RBAC/审计范围单元测试及 UAT 文档更新。 Co-authored-by: Cursor <cursoragent@cursor.com>
119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
import { useAdminLocale } from '../composables/useAdminLocale';
|
|
import { usePermissions } from '../composables/usePermissions';
|
|
import { AdminPerm } from '../constants/permissions';
|
|
|
|
const { t } = useAdminLocale();
|
|
const route = useRoute();
|
|
const { hasPermission, role } = usePermissions();
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
embedded?: boolean;
|
|
}>(),
|
|
{ embedded: false },
|
|
);
|
|
|
|
const tabs = computed(() => {
|
|
const list: { path: string; labelKey: string }[] = [];
|
|
const code = role.value;
|
|
if (code === 'SUPPORT') return list;
|
|
if (hasPermission(AdminPerm.matches)) {
|
|
list.push({ path: '/', labelKey: 'nav.dashboard.matches' });
|
|
}
|
|
if (
|
|
hasPermission(AdminPerm.reports) &&
|
|
(code === 'FINANCE_ADMIN' || code === 'SUPER_ADMIN' || list.length === 0)
|
|
) {
|
|
list.push({ path: '/dashboard/players', labelKey: 'nav.dashboard.players' });
|
|
}
|
|
return list;
|
|
});
|
|
|
|
function isActive(path: string) {
|
|
if (path === '/dashboard/players') {
|
|
return route.path === '/dashboard/players';
|
|
}
|
|
return route.path === '/' || route.path === '/dashboard/matches';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
v-if="tabs.length > 1"
|
|
class="dashboard-subnav"
|
|
:class="{ 'dashboard-subnav--embedded': embedded }"
|
|
aria-label="Dashboard sections"
|
|
>
|
|
<RouterLink
|
|
v-for="tab in tabs"
|
|
:key="tab.path"
|
|
:to="tab.path"
|
|
class="dashboard-subnav__item"
|
|
:class="{ 'dashboard-subnav__item--active': isActive(tab.path) }"
|
|
>
|
|
{{ t(tab.labelKey) }}
|
|
</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dashboard-subnav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-bottom: 16px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
border: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
min-height: 40px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-subnav--embedded {
|
|
margin-bottom: 0;
|
|
padding: 0 14px 0 0;
|
|
border: none;
|
|
border-right: 1px solid var(--border);
|
|
background: transparent;
|
|
flex-shrink: 0;
|
|
height: 44px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-subnav__item {
|
|
padding: 0 12px;
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.dashboard-subnav__item:hover {
|
|
color: var(--text);
|
|
background: var(--accent-hover);
|
|
}
|
|
.dashboard-subnav__item--active {
|
|
color: #ffffff;
|
|
background: var(--primary);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.dashboard-subnav {
|
|
overflow-x: auto;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dashboard-subnav__item {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
</style>
|