kitseed.
组合模式

内容集合

搜索、筛选、列表与卡片切换,以及不会丢掉内容的分页反馈。

内容集合应让人先看见内容,再理解如何整理。搜索和筛选共享一组数据,列表与卡片维持相同信息,阅读与收藏有独立操作入口。

安装

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

属性类型默认值说明
localezh / enzh示例文案语言

CollectionDemo 用本地数据说明组合方式。数据模型、查询与分页都属于应用,基础 Collection 家族不包含内容抓取或阅读业务。

接入真实业务

把领域模型映射成 title、description、meta、actions 等展示属性。搜索请求需要取消或忽略旧响应,分页使用真实 cursor 与并发保护;切换视图不应清除搜索、筛选和选中项。

首次加载可以显示骨架;后续加载失败应保留已加载记录。只有接口确认没有更多内容时进入 end,不能用请求失败替代结束状态。

键盘与验收

检验中文输入法、Enter 立即搜索、Escape 清空;方向键能切换视图。主内容和收藏分别可聚焦,收藏不会意外触发打开;检查长标题、窄画布、空搜索结果和分页失败。

使用边界

不要给卡片的主链接内部嵌套收藏按钮;不要让列表和卡片展示不同的业务状态;不要把无结果与请求错误显示成相同空白。

来源与版本

0.1.0。提炼自 Subtic 的内容集合布局语言,使用 Kitseed 的领域无关契约构建;Entry 类型、订阅来源、持久化和阅读器留在原应用。

本页内容