@pubinfo/module-rbac 2.0.0-beta.9 → 2.0.0-rc.2

package/src/components/RoleSelector/RoleSelector.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type { SelectValue } from './interface';
+import type { Role } from './useRole';
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { Card, Checkbox, CheckboxGroup, Modal, Spin, theme } from 'ant-design-vue';
+import RoleSearch from './RoleSearch.vue';
+import TooltipLabel from './TooltipLabel.vue';
+import { useRole, useRoleGroup } from './useRole';
+
+defineOptions({
+  name: 'RoleSelector',
+});
+
+withDefaults(defineProps<{
+  group?: boolean
+}>(), {
+  group: false,
+});
+
+const emit = defineEmits(['select']);
+
+const { token } = theme.useToken();
+
+const open = defineModel<boolean>('open');
+const setOpen = useToggle(open);
+
+const selectValue = ref<SelectValue[]>([]);
+
+const role = reactive(useRole());
+const roleGroup = reactive(useRoleGroup());
+
+const search = ref('');
+const groupId = ref('');
+async function onSearchSelect(id: string) {
+  await roleGroup.getData(id);
+}
+
+async function onOpen(value: SelectValue[] = []) {
+  selectValue.value = value;
+  search.value = '';
+  groupId.value = '';
+  await role.getData();
+  setOpen(true);
+}
+
+const roleData = computed(() => {
+  return groupId.value === '' ? role.roles : roleGroup.roles;
+});
+
+function filterName(v: Role) {
+  return roleData.value.findIndex(item => item.id === v.id) > -1 && v.name?.includes(search.value);
+}
+
+function onCheck(e: CheckboxChangeEvent, item: Role) {
+  if (e.target.checked) {
+    selectValue.value.push({ value: item.id, label: item.name } as SelectValue);
+  }
+  else {
+    selectValue.value = selectValue.value.filter(e => e.value !== item.id);
+  }
+}
+
+function onClose(value: SelectValue['value']) {
+  selectValue.value = selectValue.value.filter(e => e.value !== value);
+}
+
+function onSubmit() {
+  emit('select', selectValue.value);
+  setOpen(false);
+}
+
+function onClear() {
+  const disabledData = selectValue.value.filter(e => !role.roles.some(role => role.id === e.value));
+  selectValue.value = disabledData;
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="角色选择"
+    :mask-closable="false"
+    :width="750"
+    :z-index="1001"
+    ok-text="确认"
+    cancel-text="取消"
+    destroy-on-close
+    @ok="onSubmit()"
+  >
+    <div class="border border-solid h-[400px]" :style="{ borderColor: token.colorBorder }">
+      <div class="h-full flex">
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px', padding: 0 }"
+          :body-style="{ flex: 1, padding: 0, height: 'calc(100% - 38px)' }"
+          :style="{ boxShadow: 'none', borderRadius: 0, borderColor: token.colorBorder }"
+          class="flex h-full flex-col w-1/2"
+        >
+          <div class="p-2 flex flex-col h-full gap-2">
+            <RoleSearch v-model="search" v-model:group-id="groupId" :group="group" @select="onSearchSelect" />
+
+            <div class="flex-1 overflow-y-auto overflow-x-hidden">
+              <div v-if="role.loading || roleGroup.loading" class="flex items-center justify-center size-full">
+                <Spin />
+              </div>
+              <CheckboxGroup v-else :value="selectValue.map(e => e.value)" class="w-full overflow-x-hidden">
+                <div
+                  v-for="item in roleData"
+                  v-show="filterName(item)"
+                  :key="item.id"
+                  class="w-full py-2 border-0 border-b border-solid truncate"
+                  :style="{ borderColor: token.colorBorder }"
+                >
+                  <Checkbox :value="item.id" @change="($event) => onCheck($event, item)">
+                    <TooltipLabel :name="item.name" />
+                  </Checkbox>
+                </div>
+              </CheckboxGroup>
+            </div>
+          </div>
+        </Card>
+
+        <div
+          :style="{ borderColor: token.colorBorder }"
+          class="h-full border-0 border-r border-solid"
+        />
+
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px' }"
+          :body-style="{ flex: 1, padding: 0, overflow: 'hidden' }"
+          :style="{ boxShadow: 'none', borderRadius: 0 }"
+          class="flex h-full flex-col flex-1"
+        >
+          <template #title>
+            <span class="font-normal">
+              已选角色
+            </span>
+          </template>
+          <template #extra>
+            <a :style="{ color: token.colorPrimary }" @click="onClear()">
+              清空
+            </a>
+          </template>
+
+          <div class="gap-1 p-2 h-full overflow-y-auto">
+            <div
+              v-for="item in selectValue"
+              :key="item.value"
+              class="inline-block mb-1 py-1 px-2 mx-0.5 max-w-full rounded"
+              :style="{ backgroundColor: token.colorPrimaryBg }"
+            >
+              <TooltipLabel :name="item.label" :size="20" />
+              <CloseOutlined
+                v-if="role.roles.some(role => role.id === item.value)"
+                class="ml-1 cursor-pointer text-xs"
+                :style="{ color: token.colorPrimary }"
+                @click="onClose(item.value)"
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/components/RoleSelector/TooltipLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Tooltip } from 'ant-design-vue';
+
+defineOptions({
+  name: 'TooltipLabel',
+  inheritAttrs: false,
+});
+
+withDefaults(defineProps<{
+  name?: string
+  size?: number
+}>(), {
+  size: 21,
+});
+</script>
+
+<template>
+  <Tooltip v-if="(name || '').length > size" :title="name">
+    <span v-bind="$attrs">{{ `${name?.slice(0, size)}...` }}</span>
+  </Tooltip>
+  <span v-else v-bind="$attrs">
+    {{ name }}
+  </span>
+</template>

package/src/components/RoleSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export { default as RoleSelector } from './RoleSelector.vue';

package/src/components/RoleSelector/interface.ts

@@ -0,0 +1,4 @@
+export interface SelectValue {
+  value: string | number
+  label: string
+}

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/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',
       },