🧩 fragments-ui 组件库
面向中后台场景的高复用组件集合，提供查询、表格、图表容器等，让开发更高效。
🎯 高复用性
基于业务场景抽象，提供开箱即用的组件，大幅提升开发效率。
📝 TypeScript
完整的类型定义，提供优秀的开发体验和代码提示。
🎨 主题定制
支持主题配置，轻松适配不同的设计风格和品牌需求。
📱 响应式
完美适配各种屏幕尺寸，提供一致的用户体验。
组件分类
查询组件
SearchForm
高级搜索表单
FilterPanel
筛选面板
QuickSearch
快速搜索
表格组件
DataTable
数据表格
EditableTable
可编辑表格
TreeTable
树形表格
图表组件
ChartContainer
图表容器
Dashboard
仪表盘
MetricCard
指标卡片
表单组件
DynamicForm
动态表单
FormBuilder
表单构建器
UploadZone
上传区域
导航组件
Breadcrumb
面包屑导航
Tabs
标签页
Steps
步骤条
工具组件
Loading
加载状态
Empty
空状态
ErrorBoundary
错误边界
技术特性
模块化打包
基于 Rollup 构建，支持 Tree Shaking，按需引入减少包体积。
Storybook 文档
完整的组件文档和交互式示例，方便开发者快速上手。
单元测试
完善的测试覆盖，确保组件质量和稳定性。
主题系统
支持 CSS 变量和主题配置，轻松实现主题切换。
使用示例
安装使用
# 安装依赖
npm install fragments-ui
# 引入组件
import { SearchForm, DataTable } from 'fragments-ui';基础用法
// 搜索表单
<SearchForm
fields={[
{ name: 'keyword', label: '关键词', type: 'input' },
{ name: 'status', label: '状态', type: 'select', options: [...] }
]}
onSearch={handleSearch}
/>
// 数据表格
<DataTable
columns={columns}
dataSource={data}
pagination={{ total, current, pageSize }}
onChange={handleTableChange}
/>