h-common-ui v1.9.1

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:封装了一系列常用的工具函数,如请求、响应处理等。

使用方法

1. 安装依赖 npm i h-common-ui
2. 在项目中引入 h-common-ui
3. 使用组件和工具函数

更新

• 1.6.0 新增组件 crudTable

• 0.0.5 useList 新增返回按钮 loadlist 方法

• 0.0.6 HandleButtons 组件抽取

CRUDTable 组件说明

Dialog 组件说明

HandleButtons 组件说明

ReceiveAddress 组件说明

UploadFile 组件说明

Table 组件说明

ListToMore 组件说明

HTag 组件说明

TableSearch 组件说明

HDatePicker 组件说明

TableV3 组件说明