hrp-ui-base
v1.5.3
Published
HRP 前端公共组件、工具方法和基础样式包
Readme
hrp-ui-base
项目定位
hrp-ui-base 是各拆分业务系统共同依赖的前端公共能力包,用来承接主仓原 custom-components、custom-utils 中可复用的组件、布局、请求、权限、样式和工具能力。该包本身不是业务应用,不直接对应某一个后端服务。
对接后端服务
- 无独立业务后端。
- 包内保留少量公共接口封装和类型,供业务系统复用:
bms、hrms、notice、work-order-pc、common。 - 请求能力由
HttpUtil、业务系统运行时 token、代理和后端网关共同决定。
提供的公共组件
CustomButton:统一按钮封装。CustonSwitch:统一开关封装。AnnexUpload:通用附件上传。AnnexImgUpload:图片附件上传。AnnexUploadWeijian:卫健场景附件上传。ListSearchContent:列表页筛选/查询区域容器。BaseLayout:基础页面布局。LayoutContainer:业务系统主布局,整合菜单、页签、头部、消息、审批、导出中心、主题和字号配置。SysHeader、SysHeaderLeft、SysHeaderRight、SysHeaderTabs:系统头部与页签组件。SideMenu、SideMenuSonList:侧边菜单与子菜单列表。MessageNotificationDrawer:消息通知抽屉。ApprovalCenterDrawer:审批中心抽屉。ExportCenterDrawer:导出中心抽屉。PersonalizationGuideDialog:个性化引导弹窗。- 布局子组件:暗黑模式、字号、菜单位置、下载、待办、消息、头像等 Header 功能块。
提供的公共工具能力
- 请求与登录:
HttpUtil、exitLogin、setExitLoginRouter。 - 权限与路由:
isHavePermit、getPagePermit、toNoPermitPage、路由/路径工具。 - 表格与主题:
tableHeaderCellStyle、tableFontCellStyle、日夜模式样式配置。 - 文件与下载:
download、文件类型判断、钉钉打开/下载相关工具。 - 交互工具:
Throttle、Debounce、debounceleading、WebSocket 封装。 - 数据工具:字典、字符串、校验、格式化、过滤、树/列表转换等。
- 公共类型:
ResponseBean、ResponseBeanList、ResponseBeanTablePage、TableQueryCriteriaVO、FileBaseInfo。
使用方式
- 全局安装:
app.use(HrpUiBase)。 - 按需引用:
import { LayoutContainer, ListSearchContent, HttpUtil } from "hrp-ui-base"。 - 包入口:
src/index.ts同时导出组件、API 类型/控制器和工具函数。
技术说明
- 包名:
hrp-ui-base,当前版本:1.4.4。 - 技术栈:Vue 3、TypeScript、Vite library mode。
- 构建:
pnpm build;类型检查:pnpm typecheck。 - 组件样式入口在
src/styles/main.css,业务系统更新版本后需要重新安装依赖并构建验证。
维护注意
- 新增公共组件时,需要在
src/components.ts中注册、导出并补充 Vue 全局组件声明。 - 新增工具时,需要在
src/utils.ts统一导出。 - 影响登录、401、消息通知、审批中心、菜单跳转等能力时,需要在 entry 和主要拆分系统中回归验证。
