第一轮 · 基础组件
Web 中后台刚需。对照 Shadcn 全家桶。
本轮 6 个：① Alert（内联横幅）② Progress（进度条）③ Avatar（头像）④ Breadcrumb（面包屑）⑤ Accordion（折叠组）⑥ HoverCard（悬停预览）
0业务场景 · 商品详情页
用基础组件组合真实页面：面包屑导航 + 商品卡 + 收货地址 + 订单列表。
商品图位
新品限购
无印良品 亚麻纯色床品四件套
100% 水洗亚麻，透气亲肤，越洗越柔软。夏季裸睡首选。
¥ 689
仅用于本次下单，不存储
●
待发货 3 件
✓
已完成 12 件
♡
收藏 28 件
1Alert — 内联横幅
页面/区块顶部提示。区别 alert-dialog（弹窗需确认）。4 类型 + 可关闭 + 可带 action。
系统提示
本次审核将使用新的质量评分模型。
同步完成
3 条新 knowledge 已入库。
预算预警
今日 token 消耗已达 80%。
提交失败
Guard chain 拒绝：内容不合规。
props: { variant: 'info'|'success'|'warning'|'destructive'; title; description?; icon?; action?; onClose? }
2Progress — 进度条
任务/上传/预算完成度。4 色态 + 带标签 + indeterminate（不确定态）。
生成进度60%
已完成100%
预算预警85%
超出预算110%
props: { value: number(0-100); variant?: 'default'|'success'|'warning'|'danger'; showLabel?; size? }
3Avatar — 头像
用户/角色/账号头像。图片/文字/fallback 三态 + group 堆叠 + 在线状态点。
图片
龙
文字
?
fallback
在
在线状态
J
K
L
+1
group 堆叠
props: { src?; alt?; fallback?; size?: 'sm'|'md'|'lg'; shape?: 'circle'|'square' } + <AvatarGroup max={3}>
4Breadcrumb — 面包屑
深嵌套页面层级导航。TaskDetail / DirectiveDetail / 子页面。
props: { items: { label; href?; icon? }[] } + 最后一项自动为 current
5Accordion — 折叠组
多项折叠（vs 现有 collapsible 单项）。长内容分组、FAQ、设置面板。支持单选/多选展开。
props: { type?: 'single'|'multiple'; collapsible?; items: { trigger; content; disabled? }[] }
6HoverCard — 悬停预览
鼠标悬停弹出详情卡。列表行 hover 用户/任务预览、链接预览。
（鼠标移上去看预览）
props: { trigger: ReactNode; children: ReactNode; side?: 'top'|'bottom' }
7Icon · 统一图标入口
封装 lucide-react，默认 aria-hidden，size/strokeWidth/className 透传。装饰性默认，交互性传 aria-hidden= + aria-label。完整图标库见 lucide.dev/icons（单一 Linear 风格，搜索 + 复制 import 名）。
size 16
size 20
size 24
ChevronLeft
ChevronRight
ChevronDown
Plus
Search
User
House
Settings
Bell
Menu