@pubinfo-nightly/module-rbac 2025.11.14

package/src/components/RoleSelector/useRole.ts

@@ -0,0 +1,56 @@
+import { useToggle } from '@vueuse/core';
+import { getRbacPubRoleGroupGetById, getRbacRoleRoleList } from '@/api/modules/rbac';
+
+export type Role = API.PubRole;
+
+export function useRole() {
+  const [loading, setLoading] = useToggle(false);
+
+  const roles = ref<Role[]>([]);
+
+  async function getData() {
+    try {
+      setLoading(true);
+      const res = await getRbacRoleRoleList();
+      if (res.success) {
+        roles.value = res.data ?? [];
+      }
+    }
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return {
+    loading,
+    setLoading,
+    roles,
+    getData,
+  };
+}
+
+export function useRoleGroup() {
+  const [loading, setLoading] = useToggle(false);
+
+  const roles = ref<Role[]>([]);
+
+  async function getData(id: string) {
+    try {
+      setLoading(true);
+      const res = await getRbacPubRoleGroupGetById({ id });
+      if (res.success) {
+        roles.value = res.data?.roles ?? [];
+      }
+    }
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return {
+    loading,
+    setLoading,
+    roles,
+    getData,
+  };
+}

package/src/composables/useLottie.ts

@@ -0,0 +1,65 @@
+import type { AnimationItem } from 'lottie-web';
+import type { MaybeRef } from 'vue';
+import { tryOnMounted } from '@vueuse/core';
+import lottie from 'lottie-web/build/player/lottie_light';
+import { useTheme } from 'pubinfo-nightly';
+import { onMounted, onUnmounted } from 'vue';
+
+interface Path {
+  lightAnimationData: any
+  darkAnimationData: any
+}
+
+export function useLottie(DomRef: MaybeRef<Element | null>, themePath: Path) {
+  let anim: AnimationItem | null;
+
+  function create() {
+    const { isDark } = useTheme();
+    const animationPath = computed(() => {
+      return isDark.value ? themePath.darkAnimationData : themePath.lightAnimationData;
+    });
+    onMounted(() => {
+      createLottie(animationPath.value);
+      watch(isDark, () => {
+        destroy();
+        createLottie(animationPath.value);
+      });
+    });
+    onUnmounted(destroy);
+  }
+
+  function createLottie(animationPath: string) {
+    const container = unref(DomRef)!;
+    anim = lottie.loadAnimation({
+      path: animationPath,
+      container,
+      renderer: 'svg',
+      loop: true,
+      autoplay: false,
+      // animationData,
+    });
+  }
+
+  function play() {
+    tryOnMounted(() => {
+      anim?.play();
+    });
+  }
+
+  function stop() {
+    tryOnMounted(() => {
+      anim?.stop();
+    });
+  }
+
+  function destroy() {
+    if (anim) {
+      anim.destroy();
+      anim = null;
+    }
+  }
+
+  create();
+
+  return { play, stop, destroy };
+}

package/src/composables/useWebSocketManager.ts

@@ -0,0 +1,103 @@
+import { useViewStore } from '@/stores/view';
+
+// WebSocket 消息类型定义
+interface WebSocketMessage {
+  type: 'custom'
+  event: 'pubinfo-resolver:update'
+  data: {
+    action: 'add' | 'unlink'
+    file: string
+    timestamp: number
+    data: {
+      icons: string[]
+      layouts: string[]
+      pages: string[]
+    }
+  }
+}
+
+/**
+ * WebSocket 管理器
+ */
+export function useWebSocketManager() {
+  const viewStore = useViewStore();
+  let isInitialized = false;
+
+  /**
+   * 初始化 WebSocket 监听
+   */
+  function initializeWebSocket() {
+    if (isInitialized) {
+      return;
+    }
+
+    try {
+      // @ts-expect-error 全局 WebSocket 对象
+      const ws = globalThis.__PUBINFO_WEBSOCKET__;
+
+      if (!ws) {
+        return;
+      }
+
+      // 设置连接状态
+      viewStore.setWebSocketConnected(true);
+
+      // 监听 pubinfo-resolver:update 事件
+      ws.on('pubinfo-resolver:update', (data: WebSocketMessage['data']) => {
+        // 构造完整的消息对象
+        const message: WebSocketMessage = {
+          type: 'custom',
+          event: 'pubinfo-resolver:update',
+          data,
+        };
+
+        // 传递给 viewStore 处理
+        viewStore.handleFileChange(message);
+      });
+
+      // 监听 WebSocket 连接状态变化
+      ws.on('connect', () => {
+        viewStore.setWebSocketConnected(true);
+      });
+
+      ws.on('disconnect', () => {
+        viewStore.setWebSocketConnected(false);
+      });
+
+      isInitialized = true;
+    }
+    catch (error) {
+      console.error('WebSocket Manager: 初始化失败', error);
+      viewStore.setWebSocketConnected(false);
+    }
+  }
+
+  /**
+   * 清理 WebSocket 监听
+   */
+  function cleanupWebSocket() {
+    try {
+      // @ts-expect-error 全局 WebSocket 对象
+      const ws = globalThis.__PUBINFO_WEBSOCKET__;
+
+      if (ws) {
+        // 移除事件监听器
+        ws.off('pubinfo-resolver:update');
+        ws.off('connect');
+        ws.off('disconnect');
+      }
+
+      viewStore.setWebSocketConnected(false);
+      isInitialized = false;
+    }
+    catch (error) {
+      console.error('WebSocket Manager: 清理失败', error);
+    }
+  }
+
+  return {
+    initializeWebSocket,
+    cleanupWebSocket,
+    isInitialized: () => isInitialized,
+  };
+}

package/src/context.ts

@@ -0,0 +1,4 @@
+import type { InternalContext } from './interface';
+import { createContext } from 'pubinfo-nightly';
+
+export const ctx = createContext<InternalContext>('rbac');

package/src/index.ts

@@ -0,0 +1,51 @@
+import type { ModuleOptions } from 'pubinfo-nightly';
+import type { RbacOptions } from './interface';
+import { defineAsyncRoutes } from 'pubinfo-nightly';
+import { useWebSocketManager } from '@/composables/useWebSocketManager';
+import { useViewStore } from '@/stores/view';
+import { ctx } from './context';
+import { filterPages } from './routes';
+import './assets/styles/vxe-table.css';
+import 'uno.css';
+
+export function rbac(options: RbacOptions): ModuleOptions {
+  const { pages, sort, id = 'RBAC', request } = options;
+
+  // ctx.set 会自动缓存以便 HMR 恢复
+  ctx.set({ request });
+
+  if (pages !== 'dynamic') {
+    // 兼容 1.x 版本的本地路由
+    const asyncRoutes = filterPages({ pages, id });
+    defineAsyncRoutes(asyncRoutes, { sort });
+  }
+
+  return {
+    name: 'pubinfo-nightly:rbac',
+    setup() {
+      const viewStore = useViewStore();
+      const wsManager = useWebSocketManager();
+
+      viewStore.initializeRouteData();
+      wsManager.initializeWebSocket(); ;
+
+      // 在模块设置时初始化路由系统
+      import('./utils/routeSystem').then(({ initializeRouteSystem }) => {
+        try {
+          initializeRouteSystem();
+        }
+        catch (error) {
+          console.error('RBAC 模块路由系统初始化失败:', error);
+        }
+      });
+    },
+  };
+}
+
+export * from './components/OrgUserSelector';
+export { default as ResourceSelector } from './components/ResourceSelector/index.vue';
+export * from './composables/useWebSocketManager';
+export * from './interface';
+export * from './stores/view';
+export * from './utils/dict';
+export * from './utils/routeSystem';

package/src/interface.ts

@@ -0,0 +1,83 @@
+import type { RequestInstance } from 'pubinfo-nightly';
+import type { RouteRecordRaw } from 'vue-router';
+
+export interface RbacOptions {
+  /**
+   * 接口请求实例
+   */
+  request: InternalContext['request']
+
+  /**
+   * 页面配置。
+   * - 为 `RbacPages类型` 时, 通过该值指定页面配置
+   * - 为 `dynamic` 时, 通过资源管理的数据配置
+   * - 为空时, 默认展示所有页面
+   */
+  pages?: RbacPages | 'dynamic'
+
+  /**
+   * 配置动态路由时，在资源管理中 `动态应用` 的 `资源编码` 值。
+   *
+   *  默认值为 `RBAC`
+   */
+  id?: string
+
+  /**
+   * 路由排序，仅在使用本地注册路由时生效。
+   */
+  sort?: number
+}
+
+export interface RbacPages {
+  AuthorityManage?: {
+    Resource?: PageOptions
+    Role?: PageOptions
+    RoleGroup?: PageOptions
+    DataPermission?: PageOptions
+    Organization?: PageOptions
+    User?: PageOptions
+    Tenant?: PageOptions
+  } | boolean
+
+  SystemManage?: {
+    DictionaryPage: {
+      Dictionary?: PageOptions
+      DictionaryItem?: PageOptions
+    }
+    Position?: PageOptions
+    Region?: PageOptions
+    Group?: PageOptions
+  } | boolean
+
+  SettingManage?: {
+    ThemeSetting?: PageOptions
+    LayoutSetting?: PageOptions
+    PageAnimationSetting?: PageOptions
+    PageSizeSetting?: PageOptions
+    MenuSetting?: PageOptions
+    TabbarSetting?: PageOptions
+    ToolbarSetting?: PageOptions
+    BreadcrumbSetting?: PageOptions
+    OtherSetting?: PageOptions
+  } | boolean
+
+  SafeManage?: {
+    Blacklist?: PageOptions
+    Whitelist?: PageOptions
+    SafeSetting?: PageOptions
+    WatermarkSetting?: PageOptions
+  } | boolean
+
+  LogManage?: {
+    LoginHistory?: PageOptions
+    OperateHistory?: PageOptions
+  } | boolean
+}
+
+export type PageOptions = RouteRecordRaw | boolean;
+
+export interface InternalContext {
+  request: RequestInstance
+}
+
+export { RequestInstance };

package/src/routes/index.ts

@@ -0,0 +1,160 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { RbacPages } from '@/interface';
+import { merge } from 'lodash-es';
+import AuthorityManageMenu from './modules/authority.manage.menu';
+import LogManageMenu from './modules/log.manage.menu';
+import SafeManageMenu from './modules/safe.manage.menu';
+import StyleSettingMangeMenu from './modules/stylesetting.manage.menu';
+import SystemManageMenu from './modules/system.manage.menu';
+
+const asyncRoutes = [
+  {
+    meta: {
+      title: '权限管理系统',
+      icon: 'authority',
+      auth: 'RBAC',
+    },
+    children: [
+      AuthorityManageMenu,
+      SystemManageMenu,
+      StyleSettingMangeMenu,
+      SafeManageMenu,
+      LogManageMenu,
+    ],
+  },
+];
+
+const RBAC_ROUTE_MAP: RbacPages = {
+  AuthorityManage: {
+    Resource: true,
+    Role: true,
+    RoleGroup: true,
+    DataPermission: true,
+    Organization: true,
+    User: true,
+    Tenant: true,
+  },
+
+  SystemManage: {
+    DictionaryPage: {
+      Dictionary: true,
+      DictionaryItem: true,
+    },
+    Position: true,
+    Region: true,
+    Group: true,
+  },
+
+  SettingManage: {
+    ThemeSetting: true,
+    LayoutSetting: true,
+    PageAnimationSetting: true,
+    PageSizeSetting: true,
+    MenuSetting: true,
+    TabbarSetting: true,
+    ToolbarSetting: true,
+    BreadcrumbSetting: true,
+    OtherSetting: true,
+  },
+
+  SafeManage: {
+    Blacklist: true,
+    Whitelist: true,
+    SafeSetting: true,
+    WatermarkSetting: true,
+  },
+
+  LogManage: {
+    LoginHistory: true,
+    OperateHistory: true,
+  },
+};
+
+/**
+ * 根据传入的 `pages` 过滤路由
+ */
+export function filterPages(options: { pages?: RbacPages, id?: string }) {
+  const { pages, id } = options;
+  const pageMap = merge(RBAC_ROUTE_MAP, pages);
+
+  if (id) {
+    asyncRoutes[0].meta.auth = id;
+  }
+
+  const children = filterRoutesByMap(asyncRoutes[0].children, pageMap);
+
+  return [
+    {
+      ...asyncRoutes[0],
+      children,
+    },
+  ];
+}
+
+/**
+ * 根据 `map` 过滤 `routes`
+ */
+function filterRoutesByMap(routes: RouteRecordRaw[], pageMap: RbacPages) {
+  function filterRecursive(routeList: RouteRecordRaw[], map: Record<string, any>): RouteRecordRaw[] {
+    return routeList
+      .map((route) => {
+        if (!route.name || !(route.name in map)) {
+          return null;
+        }
+
+        const currentMap = map?.[route.name as string];
+
+        if (currentMap === false) {
+          return null;
+        }
+
+        if (currentMap === true) {
+          return route;
+        }
+
+        // 如果 map 中包含的是一个合法的 RouteRecordRaw，则替换 route
+        if (typeof currentMap === 'object' && Object.keys(currentMap).includes('path')) {
+          return currentMap;
+        }
+
+        // 递归处理子路由
+        if (typeof currentMap === 'object') {
+          const filteredChildren = route.children ? filterRecursive(route.children, currentMap) : [];
+          return { ...route, children: filteredChildren };
+        }
+
+        return null;
+      })
+      .filter(Boolean);
+  }
+
+  return filterRecursive(routes, pageMap);
+}
+
+// TODO 将以下添加到测试用例
+
+// const a = {
+//   AuthorityManage: {
+//     Resource: true,
+//     Role: false,
+//   },
+// };
+
+// const b = {
+//   AuthorityManage: {
+//     Resource: {
+//       name: 'Resource',
+//       path: 'resource',
+//       component: {},
+//     },
+//     Role: false,
+//   },
+// };
+
+// const c = {
+//   AuthorityManage: true,
+// };
+
+// const d = {
+//   AuthorityManage: false,
+// };

package/src/routes/modules/authority.manage.menu.ts

@@ -0,0 +1,92 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/authority_manage',
+  redirect: '/authority_manage/resource',
+  name: 'AuthorityManage',
+  meta: {
+    title: '用户权限管理',
+    icon: 'icon_system_manage',
+  },
+  children: [
+    {
+      path: 'resource',
+      component: () => import('@/views/resource/index.vue'),
+      name: 'Resource',
+      meta: {
+        title: '资源管理',
+        singleMenu: true,
+        auth: 'resource',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'role',
+      component: () => import('@/views/role/index.vue'),
+      name: 'Role',
+      meta: {
+        title: '角色管理',
+        singleMenu: true,
+        auth: 'role',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'role-group',
+      component: () => import('@/views/role_group/index.vue'),
+      name: 'RoleGroup',
+      meta: {
+        title: '角色组管理',
+        singleMenu: true,
+        auth: 'role_group',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'data-permission',
+      component: () => import('@/views/data-permission/index.vue'),
+      name: 'DataPermission',
+      meta: {
+        title: '数据权限管理',
+        singleMenu: true,
+        auth: 'data_permission',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'organization',
+      component: () => import('@/views/organization/index.vue'),
+      name: 'Organization',
+      meta: {
+        title: '组织管理',
+        singleMenu: true,
+        auth: 'organization',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'user',
+      component: () => import('@/views/user/index.vue'),
+      name: 'User',
+      meta: {
+        title: '用户管理',
+        singleMenu: true,
+        auth: 'user',
+        activeIcon: 'system-point',
+      },
+    },
+    {
+      path: 'tenant',
+      component: () => import('@/views/tenant/index.vue'),
+      name: 'Tenant',
+      meta: {
+        title: '租户管理',
+        singleMenu: true,
+        auth: 'tenant',
+        activeIcon: 'system-point',
+      },
+    },
+  ],
+};
+
+export default routes;

package/src/routes/modules/log.manage.menu.ts

@@ -0,0 +1,37 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/log_manage',
+  redirect: '/log_manage/login_history',
+  name: 'LogManage',
+  meta: {
+    title: '日志中心',
+    icon: 'log-center',
+  },
+  children: [
+    {
+      path: 'login_history',
+      component: () => import('@/views/log_center/login_history.vue'),
+      name: 'LoginHistory',
+      meta: {
+        title: '登录日志',
+        singleMenu: true,
+        activeIcon: 'system-point',
+        auth: 'login_history',
+      },
+    },
+    {
+      path: 'operate_history',
+      component: () => import('@/views/log_center/operate_history.vue'),
+      name: 'OperateHistory',
+      meta: {
+        title: '操作日志',
+        singleMenu: true,
+        activeIcon: 'system-point',
+        auth: 'operate_history',
+      },
+    },
+  ],
+};
+
+export default routes;