构建一个类似Justworks的PEO（专业雇主组织）与HR服务平台，其前端架构的复杂度往往远超常规的展示型应用。系统不仅需要处理庞大的员工数据表格、复杂的薪酬计算逻辑，还要保证多角色权限下的状态隔离与高可用性。采用Vue 3进行工程化实践，核心在于通过组合式API实现逻辑复用，利用状态管理工具应对跨组件通信，并结合模块化架构支撑不断迭代的业务需求。
一、项目架构设计与模块化拆分
在大型HR SaaS系统中，单体前端架构很快会变得难以维护。随着薪酬模块、福利管理、员工入职等功能的不断加入，如果所有代码都堆砌在一起，构建速度和协作开发都会受到严重影响。因此，基于Vue 3的工程化第一步是进行合理的模块化拆分。
我们通常会按照业务领域来划分顶层目录，而不是传统的按照文件类型划分。例如，将员工管理、薪酬服务、PEO合规管理等作为独立的业务模块。每个模块内部包含自己的视图、组件、状态管理和API接口层。这种领域驱动设计（DDD）的思想在前端的应用，能够极大提升代码的内聚性，当某个业务规则发生变更时，开发人员只需关注对应的模块目录。
下面是一个典型的Vue 3 HR系统项目结构示例：
src/ ├── modules/ │ ├── employees/ # 员工管理模块 │ │ ├── views/ # 页面组件 │ │ ├── components/ # 模块内部组件 │ │ ├── store.js # 员工模块状态 │ │ └── api.js # 员工相关接口 │ ├── payroll/ # 薪酬计算模块 │ └── benefits/ # 福利管理模块 ├── shared/ # 全局共享组件与工具 │ ├── components/ # 全局基础组件 │ └── utils/ # 工具函数 ├── router/ # 路由配置 └── store/ # 全局状态
通过这种结构，不同团队可以并行开发不同的业务模块，互不干扰。同时，利用Vite的自动导入插件，我们可以进一步简化模块内部的引用路径，提升开发体验，让工程师专注于业务逻辑本身而非繁琐的路径维护。
二、基于Pinia的复杂状态管理与持久化
PEO服务通常涉及多租户架构和复杂的角色权限。在一个HR系统中，全局需要存储当前登录用户信息、当前选中的企业租户ID、菜单权限树以及各种全局配置。Vue 3官方推荐使用Pinia来替代Vuex，其更符合组合式API的风格，且TypeScript支持更为友好。
在设计HR系统的状态时，我们需要将全局状态与模块状态分离。全局状态主要存储租户信息和用户权限，而像员工列表的筛选条件、薪酬计算的临时表单数据，则应该存放在模块局部的状态中。此外，为了防止页面刷新导致状态丢失，我们需要对关键状态进行持久化处理，通常结合localStorage来实现。
以下是如何在Pinia中定义一个带有持久化逻辑的租户状态管理示例：
import { defineStore } from 'pinia'
export const useTenantStore = defineStore('tenant', {
state: () => ({
currentTenantId: null,
tenantName: '',
permissions: []
}),
actions: {
setTenant(tenantData) {
this.currentTenantId = tenantData.id
this.tenantName = tenantData.name
this.permissions = tenantData.permissions
// 持久化到本地存储
localStorage.setItem('hr_tenant', JSON.stringify(this.$state))
},
clearTenant() {
this.$reset()
localStorage.removeItem('hr_tenant')
}
}
})通过在登录成功后调用setTenant方法，系统即可在后续的所有请求中携带租户标识，实现数据的隔离。这种设计使得多租户HR服务的状态管理变得清晰可控，同时避免了全局状态树的无限膨胀。
三、动态表单与复杂数据表格的工程化实现
HR系统的核心交互几乎都围绕着表单和数据表格展开。员工入职需要填写大量字段，薪酬调整需要复杂的审批表单，而员工列表则是带有高级筛选、分页和行内编辑的超大表格。如果直接在页面组件中编写这些逻辑，代码会变得极其臃肿且难以复用。
在Vue 3中，我们可以利用组合式函数（Composables）将表单逻辑进行抽离。例如，封装一个useForm函数，统一处理表单数据的初始化、校验规则的定义以及提交逻辑。对于复杂的表格，我们可以封装useTable函数，处理分页参数的变更、数据的请求与加载状态，使得页面组件只负责UI呈现。
下面展示一个抽象出来的表单逻辑组合式函数：
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
export function useForm(initialValues, submitApi) {
const formModel = reactive({ ...initialValues })
const loading = ref(false)
const submitForm = async () => {
loading.value = true
try {
await submitApi(formModel)
ElMessage.success('操作成功')
} catch (error) {
console.error('表单提交失败', error)
} finally {
loading.value = false
}
}
return {
formModel,
loading,
submitForm
}
}在具体的员工入职页面中，我们只需传入初始值和API接口，即可快速获得表单的响应式数据和提交方法。这种将UI与逻辑分离的工程化实践，是Vue 3带来的最大红利，极大地提升了复杂HR业务的开发效率和代码可测试性。
四、细粒度权限控制与路由守卫
在PEO服务中，权限控制是安全性的基石。系统通常包含超级管理员、PEO顾问、企业管理员和普通员工等多种角色。不同角色不仅能访问的菜单不同，甚至在同一个员工详情页面中，不同角色看到的字段和操作按钮也有所区别。这就要求前端必须具备细粒度的权限管控能力。
权限控制分为两个层面：路由级权限和按钮级权限。路由级权限主要通过Vue Router的导航守卫来实现，在用户跳转前校验其是否具备目标路由的访问权限。如果用户试图直接输入URL访问无权限的页面，应当被重定向到无权限提示页或系统首页。
下面是一个路由守卫的配置示例：
import { createRouter, createWebHistory } from 'vue-router'
import { useTenantStore } from '@/store/tenant'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/employees',
component: () => import('@/modules/employees/views/List.vue'),
meta: { permission: 'view_employees' }
}
]
})
router.beforeEach((to, from, next) => {
const tenantStore = useTenantStore()
if (to.meta.permission && !tenantStore.permissions.includes(to.meta.permission)) {
next('/403')
} else {
next()
}
})对于按钮级权限，我们可以自定义一个Vue指令，例如v-permission。在模板中，只需在HTML的<button>元素上添加该指令并传入权限码，指令内部会检查当前用户的权限列表，如果没有对应权限，则直接将该元素从DOM中移除。这种细粒度的控制方式，确保了HR系统在多角色协作下的数据安全与操作合规。