<div align="center"> <h1>🏢 Fat Design</h1> <p><strong>专为后台管理系统打造的企业级 React 组件库</strong></p> <p>🎯 <em>专注于表格密集型和表单密集型的后端管理场景</em></p>
npm install fat-design专为后台管理系统打造的企业级 React 组件库
🎯 专注于表格密集型和表单密集型的后端管理场景
bash
npm install fat-design
或
yarn add fat-design
或
pnpm add fat-design
`
$3
`javascript
import React from 'react'
import { Button, Message } from 'fat-design'
import 'fat-design/dist/theme-default.css'
function App() {
const handleClick = () => {
Message.success('Hello Fat Design!')
}
return (
)
}
`
📖 文档导航
$3
- 快速开始 - 从安装到第一个示例
- 安装指南 - 详细的安装和配置说明
- 基础概念 - 了解组件库的设计理念
- TypeScript - TypeScript 使用指南
$3
- 主题系统 - 主题配置和自定义
- 设计原则 - 组件设计理念
- 颜色体系 - 颜色规范和使用
- 布局系统 - 栅格和布局组件
$3
#### 🧱 基础组件
- Button 按钮 - 触发操作的基础组件
- Icon 图标 - 语义化矢量图标
- Avatar 头像 - 用户头像展示
- Badge 徽标 - 消息提醒和状态标识
#### 📐 布局组件
- Grid 栅格 - 24 栅格布局系统
- Box 盒子 - 灵活的布局容器
- Card 卡片 - 内容容器组件
- Divider 分割线 - 内容分割组件
#### 📝 表单组件 (后台表单场景核心)
- ⭐ Form/Form2 表单 - 业界领先的表单解决方案,支持复杂联动和精准渲染
- Input 输入框 - 文本输入组件
- Select 选择器 - 下拉选择组件
- DatePicker 日期选择 - 日期时间选择
- Checkbox 复选框 - 多选组件
- Radio 单选框 - 单选组件
- Switch 开关 - 开关切换组件
- BatchInput 批量输入 - 批量数据输入
- QueryForm 查询表单 - 专为后台搜索场景优化
#### 📊 数据展示 (后台表格场景核心)
- ⭐ TablePro 增强表格 - 功能最强大的表格组件,后台管理必备
- Table 表格 - 基础表格组件
- EditableTable 可编辑表格 - 表格内编辑,适合配置管理
- Tree 树形控件 - 层级数据展示
- Tag 标签 - 标记和分类
- Timeline 时间轴 - 时间流展示
- Progress 进度条 - 进度展示
#### 💬 反馈组件
- Message 全局提示 - 操作反馈信息
- Notification 通知提醒 - 系统通知
- Dialog 对话框 - 模态对话框
- Drawer 抽屉 - 侧边抽屉
- Loading 加载 - 加载状态提示
- Balloon 气泡 - 气泡提示
#### 🧭 导航组件
- Menu 导航菜单 - 导航菜单组件
- Breadcrumb 面包屑 - 页面导航路径
- Pagination 分页 - 数据分页组件
- Nav 导航 - 页面导航组件
- Tab 标签页 - 内容切换组件
#### 🔧 高级组件 (后台管理增强功能)
- Upload 上传 - 文件上传组件,支持批量上传和进度显示
- VirtualList 虚拟列表 - 大数据量列表,性能优化核心
- SortableList 可排序列表 - 拖拽排序,配置管理必备
- Image 图片 - 图片展示和预览
$3
- Hooks - 自定义 React Hooks
- Utils 工具函数 - 实用工具函数集合
- ⭐ StorageInstance 存储工具 - 统一存储解决方案,支持LocalForage和localStorage
- 配置与扩展 - 全局配置和扩展
$3
- ⭐ 完整示例 - 后台管理系统完整示例
- 后台管理场景 - 用户管理、订单管理、商品管理等典型场景
- 表格表单最佳实践 - 大型表格和复杂表单的最佳实践
- 性能优化指南 - 大数据量场景的性能优化建议
🚀 为什么选择 Fat Design?
$3
`javascript
// 一个配置搞定复杂表格
useTablePro={useTablePro}
columns={[
{ dataIndex: 'name', title: '用户名', sortable: true },
{ dataIndex: 'status', title: '状态', filterable: true },
{ dataIndex: 'createTime', title: '创建时间', dateFilter: true }
]}
batchActions={[
{ key: 'delete', name: '批量删除' },
{ key: 'export', name: '批量导出' }
]}
advancedFilter // 高级筛选
columnConfig // 列配置
virtualScroll // 虚拟滚动
/>
`
核心优势:
- ⚡ 性能卓越:虚拟滚动 + 按需渲染,万级数据流畅显示
- 🎛️ 功能全面:筛选、排序、搜索、导出、批量操作一应俱全
- 🔧 高度可配置:列显示、工具栏、操作按钮完全自定义
- 📱 响应式设计:移动端友好,完美适配各种屏幕
$3
`javascript
// Schema驱动的高性能表单
schema={{
type: 'object',
properties: {
category: {
label: '商品分类',
component: 'Select',
required: true,
enums: () => fetchCategories()
},
subcategory: {
label: '子分类',
component: 'Select',
deps: ['category'], // 依赖 category 字段
enums: (value, {values}) => fetchSubcategories(values.category)
}
}
}}
onChange={handleChange}
autoValidate
/>
`
核心优势:
- ⚡ 精准渲染:React.memo + 智能依赖跟踪,性能提升80%
- 🔗 智能联动:字段间复杂依赖关系,配置即生效
- 🛡️ 全面验证:内置验证规则 + 自定义验证,数据质量保障
- 📋 Schema驱动:配置化开发,复杂表单分钟搞定
$3
为后台管理系统精心设计的11套主题:
`javascript
// 商务专业 - 蓝色系
import 'fat-design/dist/theme-blue1.css' // 经典商务蓝
import 'fat-design/dist/theme-blue2.css' // 科技感蓝
// 清新自然 - 绿色系
import 'fat-design/dist/theme-green.css' // 自然绿
import 'fat-design/dist/theme-green2.css' // 薄荷绿
// 活力温暖 - 暖色系
import 'fat-design/dist/theme-orange.css' // 活力橙
import 'fat-design/dist/theme-red.css' // 热情红
import 'fat-design/dist/theme-pink.css' // 温馨粉
// 高端神秘 - 冷色系
import 'fat-design/dist/theme-purple.css' // 神秘紫
``
Made with ❤️ by Fat Design Team