@ruovea/user

用户 / 注册方式 模块，以 pnpm 源码包 形式提供给各宿主项目复用。

• 不打 dist、不发 npm——exports 直指 ./src/*，由宿主 Vite 编译
• 依赖注入解耦——request / auth / auths / authAll / i18n / ModifyRecord / IconSelector / CropperDialog / 当前用户 全部由宿主装配时注入
• 零侵入——包内不含 /@/ 等宿主别名引用，可独立运行，不绑定特定宿主
• 不含角色——本包不提供角色管理，仅提供用户管理、注册方式、个人中心等页面与 API

一、目录结构

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

二、宿主接入

2.1 安装

宿主 package.json 用 link: 协议指向本仓库：

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

cd <user-module 目录> && pnpm install   # 包内依赖
cd <宿主> && pnpm install                # 建立 link

2.2 装配插件

// plugins/userRole.ts
import { defineAsyncComponent, type App } from 'vue';
import { storeToRefs } from 'pinia';
import { UserRolePlugin } from '@ruovea/user';
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 setupUserRole(app: App) {
    const { userInfos } = storeToRefs(useUserInfo());
    app.use(UserRolePlugin, {
        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: () => /* ... */,
        },
    });
}

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

2.3 注册路由

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

// router/route.ts
import { userRoleRoutes } from '@ruovea/user/routes';

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

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

// router/backEnd.ts
import { userRoleDynamicComponents } from '@ruovea/user';

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

三、UserRolePluginOptions 说明

| 字段 | 必填 | 说明 | |---|---|---| | 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 UserRoleEndpoints {
  // 用户
  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'
  userChangePwd:     '/SysUser/ChangePwd'
  userResetPwd:      '/SysUser/ResetPwd'
  userUnlockLogin:   '/SysUser/UnlockLogin'
  // ... 更多见 src/api/endpoints.ts
}

五、权限编码清单

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

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

六、路由

3 条静态路由一览

| path | name | keepAlive | 隐藏 | 说明 | |---|---|---|---|---| | /system/user | sysUser | ✅ | ❌ | 用户管理 | | /system/userRegWay | sysUserRegWay | ✅ | ❌ | 注册方式 | | /system/userCenter | sysUserCenter | ✅ | ✅ | 个人中心 |

后端动态路由组件映射

| Component 字符串 | 组件 | |---|---| | @ruovea/user/user/index | 用户列表 | | @ruovea/user/userRegWay/index | 注册方式列表 | | @ruovea/user/user/userCenter | 个人中心 |

七、License

MIT