feat(rbac-web): 前端页面级权限与「权限与角色」管理页

- 新增 rbac 的 api/types/mock,对接后端 catalog/roles/users;mock 模式与后端 PageCatalog 完全对齐
- EffectivePermissions 增加 allowedPages,auth store 新增 hasPage 判定
- 路由守卫按 route.name = 页面 Key 做页面级放行,无权时跳转到 scope 内首个可访问页面;AppShell 菜单按 hasPage 过滤
- 路由守卫 switchScope 失败自动重试一次;新增懒加载 chunk 失败整页自愈 onError,修复切页白屏
- PermissionGuard hidden 态改为友好空态提示;AuthRoleView 重写为完整的用户/角色/权限编辑界面
This commit is contained in:
zhaowei.huang
2026-05-29 23:51:57 +08:00
parent 37680a0ae7
commit 00cfcf2897
11 changed files with 976 additions and 106 deletions
@@ -6,7 +6,12 @@
<slot />
<div class="pg-mask" />
</div>
<!-- hidden: 不渲染任何内容 -->
<el-empty v-else class="pg-hidden">
<template #description>
<p class="pg-hidden-title">当前账号无权查看此功能</p>
<p class="pg-hidden-hint">控件{{ widgetId }}若应为管理员可见请尝试顶部切换管理员/运营或刷新页面</p>
</template>
</el-empty>
</template>
<script setup lang="ts">
@@ -24,4 +29,7 @@ const visibility = computed(() => auth.widgetOf(props.widgetId))
position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3);
pointer-events: all; cursor: not-allowed;
}
.pg-hidden { padding: 48px 16px; }
.pg-hidden-title { margin: 0 0 6px; font-size: 14px; color: var(--mg-text-light, #fff); }
.pg-hidden-hint { margin: 0; font-size: 12px; color: var(--mg-text-muted, rgba(255,255,255,.65)); }
</style>