@pubinfo/module-rbac 2.0.0-beta.8 → 2.0.0-rc.1

package/src/context.ts

@@ -0,0 +1,20 @@
+import type { InternalContext } from './interface';
+import { createContext } from 'pubinfo';
+
+// 持久化 rbac 模块上下文，避免 HMR 后丢失 request
+const g = globalThis as any;
+g.__PUBINFO__ = g.__PUBINFO__ || {};
+if (!g.__PUBINFO__.rbacCtx) {
+  g.__PUBINFO__.rbacCtx = createContext<InternalContext>();
+}
+export const ctx = g.__PUBINFO__.rbacCtx as ReturnType<typeof createContext<InternalContext>>;
+
+// HMR 恢复
+if (g.__PUBINFO__.rbacState) {
+  try {
+    ctx.set(g.__PUBINFO__.rbacState);
+  }
+  catch {
+    // ignore
+  }
+}

package/src/index.ts

@@ -1,31 +1,34 @@
 import type { ModuleOptions } from 'pubinfo';
 import type { RbacOptions } from './interface';
-import { defineAsyncRoutes, pubinfoInjectionKey } from 'pubinfo';
+import { defineAsyncRoutes, defineIconModule, defineRouteModule } from 'pubinfo';
+import modules from 'virtual:pubinfo-resolver';
+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 } = options;
+export function rbac(options: RbacOptions): ModuleOptions {
+  const { pages, sort, id = 'RBAC', request } = options;
+
+  ctx.set({ request });
+  // 缓存以便 HMR 恢复
+  (globalThis as any).__PUBINFO__.rbacState = { request };
+
+  defineIconModule(id, modules.icons);
 
-  // TODO 考虑路由注册顺序
-  const asyncRoutes = filterPages({ pages });
-  defineAsyncRoutes(asyncRoutes);
+  if (pages === 'dynamic') {
+    defineRouteModule(id, modules.pages);
+  }
+  else {
+    // 兼容 1.x 版本的本地路由
+    const asyncRoutes = filterPages({ pages, id });
+    defineAsyncRoutes(asyncRoutes, { sort });
+  }
 
   return {
-    name: 'rbac',
-    async setup({ app }) {
-      app.provide(pubinfoInjectionKey, {
-        loadIcon(name?: string) {
-          const modules = (import.meta as any).glob('./assets/icons/*', { eager: true });
-          const path = `./assets/icons/${name}.svg`;
-          return modules[path]?.default;
-        },
-      });
-    },
+    name: 'pubinfo:rbac',
   };
 }
 
+export * from './components/OrgUserSelector';
 export * from './interface';
-export default rbac;

package/src/interface.ts

@@ -1,8 +1,31 @@
+import type { RequestInstance } from 'pubinfo';
 import type { RouteRecordRaw } from 'vue-router';
 
 export interface RbacOptions {
-  /** 替换或隐藏页面，为空时默认展示所有页面 */
-  pages?: RbacPages
+  /**
+   * 接口请求实例
+   */
+  request: InternalContext['request']
+
+  /**
+   * 页面配置。
+   * - 为 `RbacPages类型` 时, 通过该值指定页面配置
+   * - 为 `dynamic` 时, 通过资源管理的数据配置
+   * - 为空时, 默认展示所有页面
+   */
+  pages?: RbacPages | 'dynamic'
+
+  /**
+   * 配置动态路由时，在资源管理中 `动态应用` 的 `资源编码` 值。
+   *
+   *  默认值为 `RBAC`
+   */
+  id?: string
+
+  /**
+   * 路由排序，仅在使用本地注册路由时生效。
+   */
+  sort?: number
 }
 
 export interface RbacPages {
@@ -52,3 +75,9 @@ export interface RbacPages {
 }
 
 export type PageOptions = RouteRecordRaw | boolean;
+
+export interface InternalContext {
+  request: RequestInstance
+}
+
+export { RequestInstance };

package/src/routes/index.ts

@@ -1,5 +1,5 @@
-import type { RbacPages } from '@/interface';
 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';
@@ -11,8 +11,8 @@ const asyncRoutes = [
   {
     meta: {
       title: '权限管理系统',
-      // i18n: $t('route.rbac.title'),
       icon: 'authority',
+      auth: 'RBAC',
     },
     children: [
       AuthorityManageMenu,
@@ -73,10 +73,14 @@ const RBAC_ROUTE_MAP: RbacPages = {
 /**
  * 根据传入的 `pages` 过滤路由
  */
-export function filterPages(options: { pages?: RbacPages }) {
-  const { pages } = options;
+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 [
@@ -93,7 +97,7 @@ export function filterPages(options: { pages?: RbacPages }) {
 function filterRoutesByMap(routes: RouteRecordRaw[], pageMap: RbacPages) {
   function filterRecursive(routeList: RouteRecordRaw[], map: Record<string, any>): RouteRecordRaw[] {
     return routeList
-      .map(route => {
+      .map((route) => {
         if (!route.name || !(route.name in map)) {
           return null;
         }

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

@@ -1,13 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
-// import { $t } from '@/locales';
-
-// function Layout() {
-//   return import('@/layouts/index.vue');
-// }
 
 const routes: RouteRecordRaw = {
   path: '/authority_manage',
-  // component: Layout,
   redirect: '/authority_manage/resource',
   name: 'AuthorityManage',
   meta: {
@@ -22,7 +16,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '资源管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.resource'),
         auth: 'resource',
         activeIcon: 'system-point',
       },
@@ -34,7 +27,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '角色管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.role'),
         auth: 'role',
         activeIcon: 'system-point',
       },
@@ -46,7 +38,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '角色组管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.roleGroup'),
         auth: 'role_group',
         activeIcon: 'system-point',
       },
@@ -58,7 +49,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '数据权限管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.dataPermission'),
         auth: 'data_permission',
         activeIcon: 'system-point',
       },
@@ -70,7 +60,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '组织管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.organization'),
         auth: 'organization',
         activeIcon: 'system-point',
       },
@@ -82,7 +71,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '用户管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.user'),
         auth: 'user',
         activeIcon: 'system-point',
       },
@@ -94,7 +82,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '租户管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.tenant'),
         auth: 'tenant',
         activeIcon: 'system-point',
       },

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

@@ -1,13 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
-// import { $t } from '@/locales';
-
-// function Layout() {
-//   return import('@/layouts/index.vue');
-// }
 
 const routes: RouteRecordRaw = {
   path: '/log_manage',
-  // component: Layout,
   redirect: '/log_manage/login_history',
   name: 'LogManage',
   meta: {
@@ -22,7 +16,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '登录日志',
         singleMenu: true,
-        // i18n: $t('route.rbac.loginHistory'),
         activeIcon: 'system-point',
         auth: 'login_history',
       },
@@ -34,7 +27,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '操作日志',
         singleMenu: true,
-        // i18n: $t('route.rbac.operateHistory'),
         activeIcon: 'system-point',
         auth: 'operate_history',
       },

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

@@ -1,13 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
-// import { $t } from '@/locales';
-
-// function Layout() {
-//   return import('@/layouts/index.vue');
-// }
 
 const routes: RouteRecordRaw = {
   path: '/safe_manage',
-  // component: Layout,
   redirect: '/safe_manage/blacklist',
   name: 'SafeManage',
   meta: {
@@ -22,9 +16,7 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '黑名单管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.blacklist'),
         auth: 'blacklist',
-        type: 'black',
         activeIcon: 'system-point',
       },
     },
@@ -35,9 +27,7 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '白名单管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.whitelist'),
         auth: 'whitelist',
-        type: 'white',
         activeIcon: 'system-point',
       },
     },
@@ -48,7 +38,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '安全配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.safeSetting'),
         activeIcon: 'system-point',
         auth: 'safe_setting',
       },
@@ -60,7 +49,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '页面水印配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.watermarkSetting'),
         activeIcon: 'system-point',
         auth: 'watermarkSetting',
       },

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

@@ -1,19 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
-// import { $t } from '@/locales';
-
-// function Layout() {
-//   return import('@/layouts/index.vue');
-// }
 
 const routes: RouteRecordRaw = {
   path: '/setting_manage',
-  // component: Layout,
   redirect: '/setting_manage/theme-setting',
   name: 'SettingManage',
   meta: {
     title: '样式配置',
     icon: 'setting-manage',
-    auth: 'globalsettings',
   },
   children: [
     {
@@ -23,7 +16,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '主题配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.themeSetting'),
         auth: 'themeSetting',
         activeIcon: 'system-point',
       },
@@ -35,7 +27,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '布局配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.layoutSetting'),
         auth: 'layoutSetting',
         activeIcon: 'system-point',
       },
@@ -47,7 +38,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '页面动画配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.pageAnimationSetting'),
         auth: 'pageSetting',
         activeIcon: 'system-point',
       },
@@ -59,7 +49,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '页宽配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.pageSizeSetting'),
         auth: 'pagesizeSetting',
         activeIcon: 'system-point',
       },
@@ -71,7 +60,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '导航栏配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.menuSetting'),
         auth: 'menuSetting',
         activeIcon: 'system-point',
       },
@@ -83,7 +71,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '标签栏配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.tabbarSetting'),
         auth: 'tabbarSetting',
         activeIcon: 'system-point',
       },
@@ -95,7 +82,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '工具栏配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.toolbarSetting'),
         auth: 'toolbarSetting',
         activeIcon: 'system-point',
       },
@@ -107,7 +93,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '面包屑配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.breadcrumbSetting'),
         auth: 'breadcrumbSetting',
         activeIcon: 'system-point',
       },
@@ -119,7 +104,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '其他配置',
         singleMenu: true,
-        // i18n: $t('route.rbac.otherSetting'),
         auth: 'otherSetting',
         activeIcon: 'system-point',
       },

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

@@ -1,13 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
-// import { $t } from '@/locales';
-
-// function Layout() {
-//   return import('@/layouts/index.vue');
-// }
 
 const routes: RouteRecordRaw = {
   path: '/system_manage',
-  // component: Layout,
   redirect: '/system_manage/dictionary',
   name: 'SystemManage',
   meta: {
@@ -20,7 +14,6 @@ const routes: RouteRecordRaw = {
       name: 'DictionaryPage',
       meta: {
         title: '字典管理',
-        // i18n: $t('route.rbac.dictionary'),
         auth: 'dictionary',
         activeIcon: 'system-point',
       },
@@ -57,7 +50,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '岗位管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.position'),
         auth: 'position',
         activeIcon: 'system-point',
       },
@@ -69,7 +61,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '区域管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.region'),
         auth: 'region',
         activeIcon: 'system-point',
       },
@@ -81,7 +72,6 @@ const routes: RouteRecordRaw = {
       meta: {
         title: '群组管理',
         singleMenu: true,
-        // i18n: $t('route.rbac.group'),
         auth: 'group',
         activeIcon: 'system-point',
       },

package/src/views/blackWhiteList/components/drawerBlackWhiteList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
-import { postBlackWhiteListAddBlackWhiteList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
+import { postBlackWhiteListAddBlackWhiteList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
 
 defineOptions({
   name: 'DrawerBlackWhiteList',

package/src/views/blackWhiteList/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { getBlackWhiteListDeleteById, postBlackWhiteListGetBlackWhiteListPageList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
 import { ProTable } from '@pubinfo/pro-components';
 import { useToggle } from '@vueuse/core';
 import { message, Modal } from 'ant-design-vue';
+import { getBlackWhiteListDeleteById, postBlackWhiteListGetBlackWhiteListPageList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
 import DrawerBlackWhiteList from './components/drawerBlackWhiteList.vue';
 import { ACTION } from './enum';
 
@@ -12,7 +12,7 @@ defineOptions({
 });
 
 const route = useRoute();
-const isBlacklistMode = ref(route.meta.type === 'black');
+const isBlacklistMode = ref(route.path.includes('blacklist'));
 
 // 黑名单0，白名单1
 const currentType = computed(() => {
@@ -239,7 +239,7 @@ function onAction(key: string, record?: API.PubBlackWhiteList): void {
               <PubinfoIcon name="edit" class="text-base" />
               <span class="ml-4px">{{ ACTION.EDIT }}</span>
             </a>
-            <a
+            <span
               v-auth="deleteRights"
               flex
               items-center
@@ -251,15 +251,11 @@ function onAction(key: string, record?: API.PubBlackWhiteList): void {
             >
               <PubinfoIcon name="remove" class="text-base" />
               <span class="ml-4px">{{ ACTION.REMOVE }}</span>
-            </a>
+            </span>
             <a
               v-if="record.enable"
               v-auth="disableRights"
-              flex
-              items-center
-              class="text-#1D2129"
-              hover:cursor-pointer
-              hover:opacity-80
+              class="flex items-center"
               @click="onAction(ACTION.DISABLE, record)"
             >
               <PubinfoIcon name="blacklist-disable" class="text-20px" />
@@ -286,24 +282,16 @@ function onAction(key: string, record?: API.PubBlackWhiteList): void {
   </div>
 </template>
 
-<style lang="scss">
-.page-black-white-list {
-  .ant-card.pro-table {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+<style scoped>
+.page-black-white-list :deep(.ant-card.pro-table) {
+  --at-apply: rounded-t-none;
+}
 
-  .status-mark {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    margin-right: 4px;
-    background-color: #aeaeae;
-    border-radius: 50%;
+.page-black-white-list .status-mark {
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
 
-    &.active {
-      background: #01d689;
-    }
-  }
+.page-black-white-list .status-mark.active {
+  --at-apply: [background:#01d689];
 }
 </style>

package/src/views/breadcrumb_setting/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue';
 import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
-import { useSettingsStore } from '@/stores';
 
-import { message } from 'ant-design-vue';
+import { useSettingsStore } from '@/stores';
 import SetItem from '../components/setItem.vue';
 import {
   darkEnableData,
@@ -140,7 +140,7 @@ function setStyle(jsonStr: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .bar-header {
   background: var(--g-bg);
 }

package/src/views/components/animation_item.vue

@@ -7,8 +7,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    lightAnimationData: string
-    darkAnimationData: string
+    lightAnimationData?: string
+    darkAnimationData?: string
   }>(),
   {
     lightAnimationData: () => { return ''; },

package/src/views/components/setItem.vue

@@ -7,14 +7,14 @@ defineOptions({
 });
 const props = withDefaults(
   defineProps<{
-    name: string
-    descripe: string
-    type: string
-    open: boolean
+    name?: string
+    descripe?: string
+    type?: string
+    open?: boolean
     activeStyle?: Val
     styleOptions?: CheckOptions
-    lightAnimationData: string
-    darkAnimationData: string
+    lightAnimationData?: string
+    darkAnimationData?: string
   }>(),
   {
     name: '',
@@ -103,24 +103,17 @@ watch(() => setActiveStyle.value, () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .item_ani {
-  display: flex;
-  flex-direction: column;
+  --at-apply: flex flex-col bg-[color:var(--g-bg)] border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
   place-items: center center;
-  padding-top: 26px;
-  background-color: var(--g-bg);
-  border: 1px solid var(--g-tabbar-tab-hover-bg);
-  border-radius: 8px;
+}
 
-  .jb {
-    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
-  }
+.item_ani .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, transparent 100%);
 }
 
-.custom_style {
-  :deep(.text-sm) {
-    font-size: 12px;
-  }
+.custom_style :deep(.text-sm) {
+  --at-apply: text-xs;
 }
 </style>

package/src/views/data-permission/components/createAndEditDataPermission.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { ModelValue } from '@/components/OrgUserSelector/OrgSelector.vue';
-import type { SelectedResourceInfo } from '@/components/ResourceSelector/hooks/useAppAndResource';
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import type { ModelValue } from '@/components/OrgUserSelector/OrgSelector.vue';
+import type { SelectedResourceInfo } from '@/components/ResourceSelector/hooks/useAppAndResource';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
 import { getRbacPubDataPermissionsGetById, postRbacPubDataPermissionsSave, postRbacPubDataPermissionsUpdate } from '@/api/modules/rbac';
 import GroupSelector from '@/components/GroupSelector/index.vue';
 import OrgSelector from '@/components/OrgUserSelector/OrgSelector.vue';
 import { RESOURCE_MODE } from '@/components/ResourceSelector/enum';
 import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
 import ResourceSelector from '@/components/ResourceSelector/index.vue';
-import { useToggle } from '@vueuse/core';
-import { message } from 'ant-design-vue';
 import { DATA_PERMISSION_TYPE, dataPermissionOptionsAll } from '../enum';
 
 defineOptions({

package/src/views/data-permission/enum.ts

@@ -23,13 +23,13 @@ export enum DATA_PERMISSION_TYPE {
   CUSTOM_GROUP = '7',
 }
 
-export type dataPermissionType = DATA_PERMISSION_TYPE.ALL |
-  DATA_PERMISSION_TYPE.ONLY_SELF |
-  DATA_PERMISSION_TYPE.SELF_DEPT_ONLY |
-  DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB |
-  DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB |
-  DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY |
-  DATA_PERMISSION_TYPE.CUSTOM_GROUP;
+export type dataPermissionType = DATA_PERMISSION_TYPE.ALL
+  | DATA_PERMISSION_TYPE.ONLY_SELF
+  | DATA_PERMISSION_TYPE.SELF_DEPT_ONLY
+  | DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB
+  | DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB
+  | DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY
+  | DATA_PERMISSION_TYPE.CUSTOM_GROUP;
 
 export const dataPermissionTypeLabel = {
   [DATA_PERMISSION_TYPE.ALL]: '查看全部',