@iap/ui

基于 Radix UI 原语构建的企业级 React 组件库，支持 tree-shaking——按需引入单个组件时，其余组件不会进入 bundle。

特性

• 基于 Radix UI 原语，无障碍访问（a11y）开箱即用
• 所有组件独立模块导出，支持 tree-shaking
• 完整 TypeScript 类型支持
• 命令式 API（message.success()）与声明式组件（<MessageContainer />）均可使用
• 零样式耦合，CSS 类名统一使用 iap- 前缀，按需自定义

安装

pnpm add @iap/ui
Copy

peerDependencies：需要 react >= 19 和 react-dom >= 19。

组件

Message

全局消息提示，通过命令式 API 触发，自动挂载到 document.body（Radix Portal）。

快速开始

在应用根组件挂载 <MessageContainer /> 一次：

import { MessageContainer } from '@iap/ui'

export default function App() {
    return (
        <>
            <Router />
            <MessageContainer />
        </>
    )
}
Copy

在任意位置调用 API：

import { message } from '@iap/ui'

message.success('Saved successfully')
message.error('Request failed')
message.warning('Please check your input')
message.info('New version available')
Copy

按需引入

import { message, clear, remove } from '@iap/ui/message'
Copy

API

message.success(content, options?)

message.error(content, options?)

message.warning(content, options?)

message.info(content, options?)

显示一条消息，返回消息 id。

const id = message.success('Done', { duration: 5000 })
Copy

message.remove(id)

手动移除指定消息。

const id = message.info('Loading...', { duration: 0 })
// 完成后手动关闭
message.remove(id)
Copy

message.clear()

清空所有消息。

remove(id) / clear() / subscribe(listener) / getItems()

细粒度状态操作，通过按需路径引入：

import { remove, clear, subscribe, getItems } from '@iap/ui/message'

// 订阅消息队列变更
const unsubscribe = subscribe((items) => console.log(items))
// 取消订阅
unsubscribe()
Copy

类型

import type { MessageType, MessageOptions, MessageItem } from '@iap/ui/message'

// MessageType = 'success' | 'error' | 'warning' | 'info'

// MessageOptions
interface MessageOptions {
    duration?: number
}

// MessageItem
interface MessageItem {
    id: string
    type: MessageType
    content: string
    duration: number
}
Copy

样式定制

组件不内置样式，CSS 类名规则如下：

也可通过 data-type 属性选择器定制：

.iap-message[data-type="success"] { border-left: 4px solid green; }
.iap-message[data-type="error"]   { border-left: 4px solid red; }
Copy

Tree-shaking

只引入 Message 组件时，其他尚未发布的组件不会进入 bundle：

// 只打包 message 相关代码
import { message } from '@iap/ui/message'
Copy

Changelog

见 CHANGELOG.md。