Fat Design 组件库文档

🎯 最佳适用场景

Fat Design 专为后台管理系统开发而生，特别擅长处理以下场景：

$3

- 数据管理系统：用户管理、订单管理、商品管理等
- 报表中心：业务报表、财务报表、统计分析
- 监控平台：系统监控、日志管理、性能分析
- 内容管理：文章管理、媒体库、权限管理

$3

- 配置管理：系统配置、参数设置、规则配置
- 数据录入：批量导入、表单填写、信息收集
- 审批流程：工单系统、审批管理、流程配置
- 业务配置：商品配置、营销配置、用户设置

$3

- 企业ERP系统 - 销售、库存、财务、人事管理
- 电商后台 - 商品、订单、用户、营销管理
- 内容管理系统(CMS) - 文章、媒体、分类、用户管理
- 运营后台 - 数据分析、用户运营、内容运营
- 监控平台 - 系统监控、日志分析、报警管理

✨ 核心优势

$3

- TablePro组件：专为复杂表格场景设计，支持高级筛选、批量操作、列配置
- 高性能渲染：虚拟滚动支持，轻松处理万级数据量
- 丰富的交互：排序、筛选、搜索、导出一应俱全
- 用户体验：跨页选择、批量操作、状态记忆

$3

- Form2系统：业界领先的表单解决方案，支持复杂联动和验证
- 精准渲染：React.memo优化，大型表单性能提升80%
- Schema驱动：配置化表单，快速构建复杂业务表单
- 智能联动：字段依赖跟踪，实现复杂的业务逻辑

$3

- 11套内置主题：专为后台管理系统设计的配色方案
- 响应式布局：完美适配各种屏幕尺寸
- 完整类型支持：TypeScript全量支持，开发体验极佳
- 轻量高效：Tree Shaking支持，按需加载不臃肿

📦 快速开始

$3

``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' // 神秘紫
``

$3

- 大数据量处理：表格虚拟滚动，表单按需渲染
- 复杂业务逻辑：表单联动，表格筛选，批量操作
- 用户体验优化：状态记忆，跨页选择，智能加载
- 开发效率提升：Schema配置，Hook复用，TypeScript支持

🔗 相关资源

- GitHub 仓库
- 在线演示
- 更新日志
- 贡献指南

📞 支持与反馈

如果你在使用过程中遇到问题或有建议，欢迎：

- 提交 GitHub Issues
- 参与讨论和贡献代码
- 关注我们的更新动态

---

Made with ❤️ by Fat Design Team