cn hx components

@hx/components

基于设计系统的 React 组件库，底层由 @hx/data (ERO) 提供响应式数据管理。

快速上手

pnpm add @hx/components

import { HxButton, HxInput, HxFlex } from '@hx/components';
import { reactive } from '@hx/data';

const form = reactive({ username: '', password: '' });

<HxFlex direction="dir-y" gapY="md" paddingX="lg">
  <HxInput $model={form} $field="username" placeholder="用户名" />
  <HxInput $model={form} $field="password" type="password" />
  <HxButton text="登录" onClick={() => login(form)} />
</HxFlex>

组件索引

组件	页面	说明
表单
Button	→	操作按钮，支持颜色/变体系统
Input	→	文本/密码输入框，支持前后缀
FormatInput	→	格式化数字/日期/时间输入
Textarea	→	多行文本，支持自动增高
Checkbox	→	单选框，支持值对绑定
Radio	→	单选按钮，支持取消选中
MCheckbox	→	多选框组
MRadio	→	单选按钮组
Select	→	下拉选择，支持筛选/排序/清除
DateTimePicker	→	日期时间选择器，支持日历面板和多历法系统
Upload	→	文件上传，支持进度追踪
布局
Box	→	容器，支持边框/内边距
Flex	→	Flexbox 弹性布局
Grid	→	CSS Grid 网格布局
Separator	→	水平/垂直分割线
PenetrableBasic	→	语义化 HTML 封装（HxDiv, HxH1 等）
展示
Badge	→	状态标签/徽章
Label	→	样式文本，支持悬停/激活状态
Callout	→	内联提示消息
Icons	→	49 个 SVG 图标组件
遮罩层
Overlay	→	基于 Portal 的模态框/抽屉/提示系统
Alert	→	模态警示框
Toast	→	非阻塞通知
Popup	→	锚点弹出层
Actions	→	下拉操作菜单
结构
Tabs	→	标签页导航
Panel	→	可折叠面板
Pagination	→	分页导航
ButtonBar	→	按钮栏
验证
WithCheck	→	验证 HOC + 预置变体
共享
Common	→	$model/$field 模式、全局配置、样式约定
设计理念	→	组件代码设计理念及优势
国际化	→	国际化系统及内置键名
Data Attributes	→	各组件的 data-hx-* 属性一览
Hooks	→	useHxPopupContext、useHxTabs 等
Utilities	→	computePaginationData、parseFileName 等

架构

• 响应式绑定 — $model + $field 模式，通过 ERO.getValue()/ERO.setValue() 实现双向绑定。$model 自动向下传递。
• 设计令牌驱动 — 通过 data-* 属性（如 data-hx-button、data-hx-color）控制样式，不涉及 CSS-in-JS。
• 全局配置 — 每个组件组暴露 configHx*() 函数用于设置全局默认值，渲染时读取。
• 事件驱动内部通信 — 弹窗、遮罩、标签页、上传组件内部使用 EventEmitter 进行跨组件通信。