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 重写为完整的用户/角色/权限编辑界面

frontends/apps/simple-platform-vue/src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import { useAuthStore } from '@/stores/auth'
 
 const routes: RouteRecordRaw[] = [
@@ -63,6 +64,20 @@ const routes: RouteRecordRaw[] = [
   { path: '/:pathMatch(.*)*', redirect: '/login' }
 ]
 
+/**
+ * RBAC 页面权限：route.name 即「权限页面 Key」（与后端 PageCatalog / EffectivePermissions.allowedPages 对齐）。
+ * 这里从路由表派生出各 scope 的有序页面列表，供守卫做权限校验与「跳到首个可访问页面」的回退。
+ */
+function childrenPages(parentPath: string): Array<{ name: string; path: string }> {
+  const parent = routes.find((r) => r.path === parentPath)
+  return ((parent?.children ?? []) as RouteRecordRaw[])
+    .filter((c) => typeof c.name === 'string')
+    .map((c) => ({ name: String(c.name), path: `${parentPath}/${(c as { path: string }).path}` }))
+}
+const ADMIN_PAGES = childrenPages('/admin')
+const MONITOR_PAGES = childrenPages('/monitor')
+const MANAGED_PAGE_NAMES = new Set([...ADMIN_PAGES, ...MONITOR_PAGES].map((p) => p.name))
+
 const router = createRouter({
   history: createWebHistory(),
   routes
@@ -93,13 +108,35 @@ router.beforeEach(async (to) => {
   // 会话 45 AR-6：switchScope 改为后端发起 ——
   // 必须 await 完成后再放行，否则页面用旧 scope 的 perms 渲染一帧后才被纠正。
   // 失败（如 ops 账号尝试切 Platform 被 403）则维持原 scope，路由仍放行让用户看到 readonly UI。
-  try {
-    if (to.path.startsWith('/admin') && auth.scope !== 'Platform') {
-      await auth.switchScope('Platform')
-    } else if (to.path.startsWith('/monitor') && auth.scope !== 'RCSMonitor') {
-      await auth.switchScope('RCSMonitor')
+  const needScope: 'Platform' | 'RCSMonitor' | null =
+    to.path.startsWith('/admin') ? 'Platform'
+      : to.path.startsWith('/monitor') ? 'RCSMonitor'
+        : null
+  if (needScope && auth.scope !== needScope) {
+    try {
+      await auth.switchScope(needScope)
+    } catch (_) {
+      // 偶发失败（网络/超时）重试一次：避免带着「另一个域」的 effectivePermissions 渲染当前页，
+      // 否则配置页会被 PermissionGuard 误判为隐藏 → 整页空白（刷新后重新 switch 才恢复）。
+      try { await auth.switchScope(needScope) } catch (_2) { /* 仍失败：维持原 scope，UI 多为 readonly */ }
     }
-  } catch (_) { /* 服务端拒绝切换：维持原 scope，UI 会按现有 perms 渲染（多为 readonly） */ }
+  }
+
+  // RBAC 页面级权限：scope 已切换到目标域，allowedPages 已刷新。
+  // 若目标页面不在当前账号的可访问页面集合内，跳到该 scope 下首个可访问页面（菜单顺序）。
+  const name = typeof to.name === 'string' ? to.name : ''
+  if (name && MANAGED_PAGE_NAMES.has(name) && !auth.hasPage(name)) {
+    const list = auth.scope === 'RCSMonitor' ? MONITOR_PAGES : ADMIN_PAGES
+    const fallback = list.find((p) => auth.hasPage(p.name))?.path
+    if (fallback && fallback !== to.path) {
+      ElMessage.warning('无权访问该页面，已跳转到可访问页面')
+      return fallback
+    }
+    if (!fallback) {
+      ElMessage.error('当前账号在该区域没有任何可访问页面，请联系管理员分配权限')
+      return { path: '/status' }
+    }
+  }
   return true
 })
 
@@ -108,4 +145,15 @@ router.afterEach((to) => {
   document.title = to.meta.title ? `${to.meta.title} · ${base}` : base
 })
 
+// 懒加载 chunk 失败自愈：重新部署后产物 hash 变化、或网络抖动会让动态 import() 失败，
+// 表现为点击导航后白屏、刷新才好。这里捕获该类错误并整页重载到目标路由，
+// 让浏览器重新拉取最新的 index.html 与对应 chunk 引用。
+router.onError((error, to) => {
+  const m = (error as Error)?.message ?? ''
+  if (/dynamically imported module|Loading (chunk|CSS chunk)|module script failed|Failed to fetch/i.test(m)) {
+    if (to?.fullPath) window.location.assign(to.fullPath)
+    else window.location.reload()
+  }
+})
+
 export default router