第一轮 · 基础组件
Web 中后台刚需。对照 Shadcn 全家桶。
本轮 6 个：① Alert（内联横幅）② Progress（进度条）③ Avatar（头像）④ Breadcrumb（面包屑）⑤ Accordion（折叠组）⑥ HoverCard（悬停预览）
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' }