场景示例
场景示例
用真实业务片段理解 Skyroc UI 的组件组合方式
场景示例用于展示组件如何在 Next.js 的 C 端业务和官网页面里协作。它不替代组件 API 文档，而是帮助你判断页面结构、组件选择和反馈方式。
推荐场景
官网首页
CTA、特性区、内容卡片和转化入口的组合
注册登录
输入、校验、提交按钮和错误提示的最小组合
内容筛选
搜索、分类切换、排序和空状态反馈
订阅表单
轻量输入、同意项、提交反馈和隐私说明
确认流程
取消订阅、删除收藏等敏感操作的确认方式
编写原则
- 示例优先展示业务结构，不堆满所有 props。
- 示例中的视觉密度应接近真实 C 端页面或官网页面，而不是纯展示 Demo。
- 示例只使用必要组件，避免为了展示而制造复杂度。
- 当场景需要完整 API 时，链接回对应组件文档。
组件索引
| 场景 | 常用组件 |
|---|---|
| 官网首页 | Button、Card、Tag、Icon、Carousel |
| 注册登录 | Form、Input、Password、Button、Alert |
| 内容筛选 | Input、Select、Segment、Badge |
| 订阅表单 | Input、Checkbox、Button、Sonner |
| 确认流程 | AlertDialog、Button、Sonner |