🧩组件库专栏
xiaoye-components(AI 协作研发的 Vue 3 组件库)专栏十一卷共 144 篇:全景开篇、工程化基座、设计系统与令牌、组件通用架构、基础组件逐个解剖(基础/表单/反馈/数据)、pro-components 增强层、质量保障与 AI 协作方法论
概述
全景与开篇
工程化基座
设计系统与令牌
组件通用架构
基础组件基础篇
- 5-01-Icon-全库图标基座
- 5-02-Button-最标准的解剖样本
- 5-03-Link-链接与按钮的边界
- 5-04-Breadcrumb-父收集子的注册模式
- 5-05-Text-排版令牌的消费范本
- 5-06-Badge-依附与独立双形态
- 5-07-Avatar与头像组-溢出折叠的计数策略
- 5-08-Image-从懒加载占位到全屏viewer
- 5-09-Watermark-canvas水印与防删除哨兵
- 5-10-Card-容器类组件的slot约定
- 5-11-CheckCard-卡片视觉与受控语义的合体
- 5-12-Carousel-轮播状态机与定时器治理
- 5-13-Affix-固钉的几何计算
- 5-14-Anchor-锚点与滚动联动
- 5-15-Menu-层级注册与子菜单浮层
- 5-16-Row-栅格的provide侧与gutter下发
- 5-17-Col-响应式断点矩阵
- 5-18-Scrollbar-原生能力的封装度
- 5-19-Splitter-拖拽分栏
- 5-20-Divider-最小组件的完整规范
- 5-21-Tag-通用状态类型的消费
- 5-22-Space-间距的运行时方案
- 5-23-Tabs-激活态管理与面板联动
基础组件表单篇
- 6-01-ConfigProvider-全局配置源头
- 6-02-Input-受控输入的工程化
- 6-03-AutoComplete-三合一组合
- 6-04-Cascader-级联面板
- 6-05-Radio-三形态一个context
- 6-06-Checkbox-min-max约束与options配置化
- 6-07-Switch-最小受控范本
- 6-08-InputTag-复合输入态
- 6-09-InputNumber-精度与边界
- 6-10-Rate-评分与可达性
- 6-11-Slider-拖拽几何与step吸附
- 6-12-DatePicker-日历面板状态机
- 6-13-TimePicker-时间面板
- 6-14-TimeSelect-select的特化
- 6-15-Select-泛型浮层受控组件
- 6-16-TreeSelect-树与多选映射
- 6-17-Form-校验编排
- 6-18-FormItem-消息与aria链路
- 6-19-Upload-文件队列
- 6-20-Editor-富文本桥接
基础组件反馈篇
- 7-01-Alert-语义色派生
- 7-02-Message-命令式消息治理
- 7-03-Notification-双形态并存
- 7-04-Backtop-滚动目标解析
- 7-05-Collapse-手风琴模式
- 7-06-CollapseTransition-height过渡为何必须JS参与
- 7-07-Empty-无逻辑组件的规范
- 7-08-Loading-指令与服务双注册
- 7-09-Skeleton-节流防闪烁
- 7-10-Result-预设场景组合
- 7-11-Tooltip-浮层四件套最小样本
- 7-12-Popover-触发策略全集
- 7-13-Popconfirm-确认语义
- 7-14-Dropdown-键盘导航
- 7-15-Transfer-双栏数据流
- 7-16-Dialog-模态全解
- 7-17-Drawer-容器变体
基础组件数据篇
增强层pro-components
- 9-01-增强层总览-导出边界与双重守卫
- 9-02-core.ts-协议层
- 9-03-field-schema-一份schema三形态
- 9-04-SearchForm-查询语义
- 9-05-ProForm-schema驱动表单
- 9-06-OverlayForm-多态容器
- 9-07-DialogForm-Omit派生类型的封装范式
- 9-08-DrawerForm-对称特化
- 9-09-StepsForm-分步表单
- 9-10-RequestForm-请求表单
- 9-11-LoginForm-登录预设
- 9-12-FilterPanel-筛选面板
- 9-13-PageToolbar-工具条
- 9-14-PageHeader-页头
- 9-15-PageContainer-页面容器
- 9-16-AvatarMenu-头像菜单
- 9-17-HeaderTabs-头部页签
- 9-18-NoticeCenter-消息中心
- 9-19-StatCard-指标卡
- 9-20-AsyncStateContainer-三态容器
- 9-21-ListPage-薄预设封装
- 9-22-CrudPage-整页CRUD
- 9-23-SplitLayoutPage-分栏页面
- 9-24-ProTable上-配置模型
- 9-25-ProTable下-运行时引擎
- 9-26-ColumnSettingPanel-列设置
- 9-27-SavedViewTabs-保存视图
- 9-28-TableFilterDrawer-筛选抽屉
- 9-29-ImportResultTable-导入回显
- 9-30-AuditTimeline-审计流
- 9-31-DetailPanel-详情浮层
- 9-32-DetailPage-详情页
- 9-33-ApprovalFlowPanel-审批流
- 9-34-ImportWizard-导入向导
- 9-35-ExportTaskPanel-导出任务