跨平台交互组件库搭建指南
🎯 30章 · 从零到实战
v2.0
1
组件库概述
概念
什么是跨平台组件库、为什么需要、主流方案对比 (RN / Flutter / Taro / uni-app)
2
项目初始化
环境
脚手架创建、目录结构、TypeScript、ESLint & Prettier 配置
3
设计系统基础
Token
设计Token概念、颜色/字体规范、间距阴影体系、Token实现
4
Button组件（一）
基础
需求分析、Props类型、基础样式、点击事件
5
Button组件（二）
状态
Loading / Disabled / 尺寸适配 / 颜色主题
6
Button组件（三）
增强
图标按钮、按钮组、Block模式、Ripple动效
7
Input组件（一）
基础
需求分析、受控/非受控、基础样式、事件处理
8
Input组件（二）
功能
密码框/清除、前缀后缀插槽、验证状态、字数统计
9
Input组件（三）
模式
搜索框、文本域、自动聚焦、键盘类型适配
10
Card组件
布局
卡片布局、阴影圆角、Header/Body/Footer插槽、点击卡片
11
Modal组件（一）
弹窗
设计原则、遮罩层、内容插槽、打开/关闭动画
12
Modal组件（二）
交互
拖拽功能、点击遮罩关闭、Esc键关闭、多弹窗堆叠
13
Toast组件
轻提示
轻提示设计、自动消失、不同位置、多实例管理
14
Switch组件
开关
开关设计、拖拽切换、无障碍支持、颜色主题
15
Tabs组件
标签
标签页设计、滑动指示器、懒加载、可滚动标签
16
List组件
列表
列表项设计、分组列表、滑动删除、加载更多
17
Picker组件
选择器
选择器设计、单列/多列、联动选择、自定义渲染
18
Calendar组件
日历
日历设计、日期范围选择、月份切换、快捷选项
19
图表组件（一）
柱状图
Canvas vs SVG、基础柱状图、响应式适配
20
图表组件（二）
折线/面积
折线图、面积图、动画过渡、Tooltip
21
图表组件（三）
饼图
饼图、环形图、图例交互、数据更新
22
主题系统
深色/浅色
浅色/深色切换、CSS变量、运行时切换、主题持久化
23
国际化
i18n
多语言方案、语言包管理、运行时切换、日期/数字格式化
24
无障碍访问
A11y
ARIA标签、键盘导航、屏幕阅读器、焦点管理
25
单元测试
Jest
Jest配置、渲染测试、事件触发、快照测试
26
文档系统
Storybook
Storybook搭建、组件文档、Demo展示、Props表格
27
打包发布
构建
Rollup配置、ESM/CJS/UMD、Tree Shaking、版本管理
28
性能优化
优化
虚拟列表、组件懒加载、memo/useMemo、包体积优化
29
实战项目（一）
移动端
搭建移动端表单页面、集成多个组件、表单验证
30
实战项目（二）
后台
后台管理系统首页、集成图表与列表、响应式布局