组合模式
内容集合
搜索、筛选、列表与卡片切换,以及不会丢掉内容的分页反馈。
内容集合应让人先看见内容,再理解如何整理。搜索和筛选共享一组数据,列表与卡片维持相同信息,阅读与收藏有独立操作入口。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/collection-demo.json首次使用请先完成 Registry 与主题接入。
可以实际体验的流程
输入关键词搜索、添加设计分类、切换列表或卡片、打开一项、收藏一项。设置“下一次加载”为失败后点击加载更多,已有内容会保留,重试入口不会消失。画布顶部可切换首次加载、空内容与整体错误。
所有记录和响应均为本地演示数据,收藏与阅读状态不会保存到服务端;预览中的品牌名称仅作为文本示例。
组成
| 部分 | 组件 | 职责 |
|---|---|---|
| 标题与控制区 | PageHeader、PageBody | 内容数量、搜索与布局操作 |
| 搜索与筛选 | SearchField、FilterChip | 查询、条件展示和移除 |
| 内容主体 | ContentRow、ContentCard、Avatar | 共享展示数据、独立操作 |
| 视图与分页 | ViewSwitcher、LoadMore | 明确的受控显示与加载状态 |
| 等待与恢复 | ListSkeleton、EmptyState、ErrorState、Alert | 区分没有内容、没有结果与请求失败 |
模式 API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
locale | zh / en | zh | 示例文案语言 |
CollectionDemo 用本地数据说明组合方式。数据模型、查询与分页都属于应用,基础 Collection 家族不包含内容抓取或阅读业务。
接入真实业务
把领域模型映射成 title、description、meta、actions 等展示属性。搜索请求需要取消或忽略旧响应,分页使用真实 cursor 与并发保护;切换视图不应清除搜索、筛选和选中项。
首次加载可以显示骨架;后续加载失败应保留已加载记录。只有接口确认没有更多内容时进入 end,不能用请求失败替代结束状态。
键盘与验收
检验中文输入法、Enter 立即搜索、Escape 清空;方向键能切换视图。主内容和收藏分别可聚焦,收藏不会意外触发打开;检查长标题、窄画布、空搜索结果和分页失败。
使用边界
不要给卡片的主链接内部嵌套收藏按钮;不要让列表和卡片展示不同的业务状态;不要把无结果与请求错误显示成相同空白。
来源与版本
0.1.0。提炼自 Subtic 的内容集合布局语言,使用 Kitseed 的领域无关契约构建;Entry 类型、订阅来源、持久化和阅读器留在原应用。