h-common-ui
v1.9.1
Published
华研前端-公共组件库
Downloads
17
Readme
h-common-ui
一、核心架构 本组件库采用模块化设计思想，包含 Hooks 封装层、通用组件层、工具方法层三层架构，支持跨项目复用，提升开发效率 60%+
二、Hooks 封装层
useList 业务逻辑封装
分页管理：自动化处理页码切换、分页参数维护
数据操作：集成单条/批量删除模式
输出控制：支持导出打印
状态同步：自动同步列表数据与分页器状态
useDialog 弹窗控制
生命周期管理：open/close/save 回调链式调用
状态控制：集成 loading 态、表单重置时机处理
useAdd 新增编辑通用逻辑
标题动态生成：根据操作类型自动设置标题（新增/编辑/查看）
三、通用组件层
CRUD 增强组件
包含上移下移等功能，外部使用时无需关心增删改查等业务，只需要将新增所需数据填入即可快速使用
SmartDialog 智能弹窗
配置化开启：支持 fullscreen/modal/width 等 20+参数
动画扩展：内置 slide/fade/zoom 三种过渡效果
地理选择组件
数据驱动：基于国家统计局最新行政数据
级联策略：支持省市二级/省市区三级模式切换
扩展接口：提供坐标解析、逆地理编码能力
JSX Table 渲染器
声明式开发：通过 column 配置数组自动生成复杂表格
性能优化：支持虚拟滚动（10000+数据量流畅渲染）
文件上传组件
多模式支持：OSS 直传/本地存储/第三方云存储（可拓展）
安全控制：文件类型白名单、大小限制、MD5 校验
预览能力：集成图片/PDF 在线预览
四、工具方法层
数据处理
脱敏处理：身份证/手机号/银行卡号智能脱敏
数据转换：树形结构扁平化、CSV/JSON 互转
格式验证：统一社会信用代码校验、邮箱格式校验
五、技术优势
文档完善：提供文档
六、接入指南
安装：npm install @common/ui --save
引用：支持全量引入/按需加载两种模式
该架构已在多个中大型项目中验证，平均减少重复代码量 75%，提升功能开发效率 200%+
功能
- utils:封装了一系列常用的工具函数,如请求、响应处理等。
使用方法
- 安装依赖 npm i h-common-ui
- 在项目中引入 h-common-ui
- 使用组件和工具函数
更新
1.6.0 新增组件 crudTable
0.0.5 useList 新增返回按钮 loadlist 方法
0.0.6 HandleButtons 组件抽取