@ruovea/userrolemenu

用户 / 角色 / 菜单 / 注册方式 权限基础模块，以 pnpm 源码包 形式提供给各宿主项目复用。

• 源码包——exports 直指 ./src/*，由宿主 Vite 编译，无需预构建 dist
• 依赖注入解耦——request / auth / auths / authAll / i18n / ModifyRecord / IconSelector / CropperDialog / 当前用户 全部由宿主装配时注入
• 零侵入——包内不含 /@/ 等宿主别名引用，可独立运行，不绑定特定宿主

一、目录结构

src/
├─ index.ts          # 入口：导出 UserRoleMenuPlugin + API + 类型 + 路由
├─ plugin.ts         # Vue install（校验必填项 / provide / mergeLocaleMessage）
├─ context.ts        # InjectionKey + useUserRoleMenuContext()
├─ types.ts          # UserRoleMenuPluginOptions
├─ routes.ts         # 5 条静态路由 + 后端动态路由组件映射
├─ api/
│  ├─ index.ts       # 汇总导出
│  ├─ http.ts        # request 注入点
│  ├─ endpoints.ts   # URL 前缀（可覆盖）
│  ├─ menu.ts        # 菜单 API（8 个）
│  ├─ role.ts        # 角色 API（11 个）
│  ├─ user.ts        # 用户 API（20 个）
│  ├─ org.ts         # 机构 API（5 个）
│  ├─ pos.ts         # 职位 API（5 个）
│  ├─ user-reg-way.ts # 注册方式 API（4 个）
│  ├─ user-menu.ts   # 用户菜单 API（4 个）
│  └─ file.ts        # 头像 / 签名上传 API（2 个）
├─ i18n/locales/     # 6 语言（en / fr-fr / ja-jp / vi-vn / zh-cn / zh-tw）
└─ views/
   ├─ menu/
   │  ├─ index.vue             # 菜单管理（树表）
   │  └─ component/editMenu.vue
   ├─ role/
   │  ├─ index.vue             # 角色管理
   │  └─ component/
   │     ├─ editRole.vue
   │     └─ grantMenu.vue      # 分配菜单
   ├─ user/
   │  ├─ index.vue             # 用户管理
   │  └─ component/
   │     ├─ editUser.vue
   │     ├─ grantRole.vue
   │     ├─ userCenter.vue     # 个人中心
   │     ├─ orgTree.vue        # 机构树
   │     ├─ enums.ts           # AccountTypeEnum
   │     └─ base64Conver.ts    # base64 → File
   └─ userRegWay/
      ├─ index.vue
      └─ component/editRegWay.vue

二、宿主接入

2.1 安装

# npm
npm install @ruovea/userrolemenu

# pnpm
pnpm add @ruovea/userrolemenu

或使用 link: 协议指向本地源码：

{
  "dependencies": {
    "@ruovea/userrolemenu": "link:../../module/user-role-menu-module/packages/user-role-menu"
  }
}

2.2 装配插件

// plugins/userRoleMenu.ts
import { defineAsyncComponent, type App } from 'vue';
import { storeToRefs } from 'pinia';
import { UserRoleMenuPlugin } from '@ruovea/userrolemenu';
import request from '/@/utils/request';
import { auth, auths, authAll } from '/@/utils/authFunction';
import { i18n } from '/@/i18n/index';
import { useUserInfo } from '/@/stores/userInfo';
import { clearAccessAfterReload } from '/@/utils/axios-utils';

export function setupUserRoleMenu(app: App) {
    const { userInfos } = storeToRefs(useUserInfo());
    app.use(UserRoleMenuPlugin, {
        request: request as any,
        auth,
        auths,
        authAll,
        i18n: i18n as any,
        components: {
            ModifyRecord: defineAsyncComponent(() => import('/@/components/table/modifyRecord.vue')),
            IconSelector: defineAsyncComponent(() => import('/@/components/iconSelector/index.vue')),
            CropperDialog: defineAsyncComponent(() => import('/@/components/cropper/index.vue')),
        },
        getUserInfo: () => userStore.userInfos,
        userCenter: {
            base64ToFile,
            clearAccessAfterReload,
            sm2Encrypt,
            sm2PublicKey: window.__env__.VITE_SM_PUBLIC_KEY,
            uploadAvatar,
            uploadSignature,
            getApiOrigin: () => {
                const apiUrl = window.__env__.VITE_API_URL || '';
                return apiUrl.startsWith('http') ? new URL(apiUrl).origin : '';
            },
            getFileUrl: (row) => /* ... */,
        },
    });
}

// main.ts
import { setupUserRoleMenu } from '/@/plugins/userRoleMenu';
// ... app.use(pinia) 之后
setupUserRoleMenu(app);

2.3 注册路由

静态路由（前端控制路由模式）

// router/route.ts
import { userRoleMenuRoutes } from '@ruovea/userrolemenu';

export const dynamicRoutes = [
  {
    path: '/',
    component: () => import('/@/layout/index.vue'),
    children: [
      // ...其它路由
      ...userRoleMenuRoutes,
    ],
  },
];

后端动态路由组件映射（后端控制路由模式）

// router/backEnd.ts
import { userRoleMenuDynamicComponents } from '@ruovea/userrolemenu';

export function dynamicImport(modules, component) {
    // ...
    if (userRoleMenuDynamicComponents[component]) return userRoleMenuDynamicComponents[component];
    // ...
}

包内 userRoleMenuDynamicComponents 同时兼容 @ruovea/userrolemenu/* 和 @ruovea/system/* 格式的 Component 字符串。

三、UserRoleMenuPluginOptions 说明

| 字段 | 必填 | 说明 | |---|---|---| | request | ✅ | 宿主 axios 实例（已配 baseURL / token / 拦截器） | | components.ModifyRecord | ✅ | 修改记录展示组件，接收 :data prop | | components.IconSelector | ➖ | 图标选择器（菜单编辑用），缺省时菜单图标字段不渲染 | | components.CropperDialog | ➖ | 头像裁剪弹窗（userCenter 用），缺省时头像更换不可用 | | auth | ➖ | (code: string) => boolean，按钮权限校验，缺省 () => true | | auths | ➖ | (codes: string[]) => boolean，多权限满足其一，缺省 () => true | | authAll | ➖ | (codes: string[]) => boolean，多权限全满足，缺省 () => true | | i18n | ➖ | 宿主 vue-i18n 实例（用于 mergeLocaleMessage） | | getUserInfo | ➖ | () => UserInfo，返回当前登录用户对象 | | registerI18n | ➖ | 是否自动 merge i18n，默认 true | | endpoints | ➖ | 覆盖 API URL 前缀 | | userCenter | ➖ | 个人中心页面注入（base64ToFile / clearAccessAfterReload / sm2Encrypt / sm2PublicKey / uploadAvatar / uploadSignature / getApiOrigin / getFileUrl） |

四、Endpoints 说明

所有 API 路径均可通过 endpoints 覆盖，默认值（节选）：

interface UserRoleMenuEndpoints {
  // 菜单
  menuLoginMenuTree: '/SysMenu/LoginMenuTree'
  menuData:          '/SysMenu/Data'
  menuList:          '/SysMenu/List'
  menuAddMenu:       '/SysMenu/AddMenu'
  menuAddMenus:      '/SysMenu/AddMenus'
  menuUpdateMenu:    '/SysMenu/UpdateMenu'
  menuDeleteMenu:    '/SysMenu/DeleteMenu'
  menuOwnBtnPermList:'/SysMenu/OwnBtnPermList'
  // 角色
  rolePages:         '/SysRole/Pages'
  roleData:          '/SysRole/Data'
  roleList:          '/SysRole/List'
  roleAddRole:       '/SysRole/AddRole'
  roleUpdateRole:    '/SysRole/UpdateRole'
  roleDeleteRole:    '/SysRole/DeleteRole'
  roleGrantMenu:     '/SysRole/GrantMenu'
  roleGrantDataScope:'/SysRole/GrantDataScope'
  roleOwnMenuList:   '/SysRole/OwnMenuList'
  roleOwnOrgList:    '/SysRole/OwnOrgList'
  roleSetStatus:     '/SysRole/SetStatus'
  // 用户
  userUserById:      '/SysUser/UserById'
  userData:          '/SysUser/Data'
  userPages:         '/SysUser/Pages'
  userAddUser:       '/SysUser/AddUser'
  userUpdateUser:    '/SysUser/UpdateUser'
  userDeleteUser:    '/SysUser/DeleteUser'
  userBaseInfo:      '/SysUser/BaseInfo'
  userUpdateBaseInfo:'/SysUser/UpdateBaseInfo'
  userSetStatus:     '/SysUser/SetStatus'
  userGrantRole:     '/SysUser/GrantRole'
  userChangePwd:     '/SysUser/ChangePwd'
  userResetPwd:      '/SysUser/ResetPwd'
  userUnlockLogin:   '/SysUser/UnlockLogin'
  // ... 更多见 src/api/endpoints.ts
}

五、权限编码清单

| 编码 | 位置 | 说明 | |---|---|---| | sysMenu:list | 菜单 | 查询按钮 | | sysMenu:addMenu | 菜单 | 新增 / 复制按钮 | | sysMenu:updateMenu | 菜单 | 编辑按钮 | | sysMenu:deleteMenu | 菜单 | 删除按钮 | | sysRole:page | 角色 | 查询按钮 | | sysRole:addRole | 角色 | 新增按钮 | | sysRole:updateRole | 角色 | 编辑按钮 | | sysRole:deleteRole | 角色 | 删除按钮 | | sysRole:grantMenu | 角色 | 分配菜单按钮 | | sysRole:setStatus | 角色 | 状态开关 | | sysUser:page | 用户 | 查询按钮 | | sysUser:addUser | 用户 | 新增 / 复制按钮 | | sysUser:updateUser | 用户 | 编辑按钮 | | sysUser:deleteUser | 用户 | 删除按钮 | | sysUser:grantRole | 用户 | 分配角色按钮 | | sysUser:setStatus | 用户 | 状态开关 | | sysUser:resetPwd | 用户 | 重置密码按钮 | | sysUser:unlockLogin | 用户 | 解除锁定按钮 | | sysUser:baseInfo | 用户中心 | 保存基础信息按钮 | | sysUser:changePwd | 用户中心 | 修改密码按钮 | | sysUserRegWay:list | 注册方式 | 页面查询权限 | | sysUserRegWay:add | 注册方式 | 新增按钮 | | sysUserRegWay:update | 注册方式 | 编辑按钮 | | sysUserRegWay:delete | 注册方式 | 删除按钮 | | sysFile:uploadSignature | 用户中心 | 电子签名按钮 |

未注入 auth / auths / authAll 时所有按钮可见（缺省 () => true）。

六、路由

5 条静态路由一览

| path | name | keepAlive | 隐藏 | 说明 | |---|---|---|---|---| | /system/menu | sysMenu | ✅ | ❌ | 菜单管理 | | /system/role | sysRole | ✅ | ❌ | 角色管理 | | /system/user | sysUser | ✅ | ❌ | 用户管理 | | /system/userRegWay | sysUserRegWay | ✅ | ❌ | 注册方式 | | /system/userCenter | sysUserCenter | ✅ | ✅ | 个人中心 |

后端动态路由组件映射

| Component 字符串 | 组件 | |---|---| | @ruovea/userrolemenu/menu/index | 菜单列表 | | @ruovea/userrolemenu/role/index | 角色列表 | | @ruovea/userrolemenu/user/index | 用户列表 | | @ruovea/userrolemenu/userRegWay/index | 注册方式列表 | | @ruovea/userrolemenu/user/userCenter | 个人中心 |

同时兼容 @ruovea/system/* 格式的 Component 字符串。

七、License

MIT