SuperAPI AI 工具集

Shade page templates

前端与建站

查看项目

更新于 10-16 06:43

技能介绍

Shade 页面模板用于在构建 Ghost 管理后台新页面时,先判断页面类型,再复用匹配的模板,而不是自行发明页面框架。

用途:为新建管理后台页面或路由选择正确的页面结构。

页面类型划分:列表页用于浏览或扫描一组条目,实例如 Members、Tags、Comments、Automations、ActivityPub,结构为 PageHeader(标题+数量+搜索/筛选/操作)→ 表格或列表 → 空状态 → 分页,对应模式为 ListPage(组合 PageHeader),复杂筛选 UI 用 Filters。详情页用于查看或编辑单个条目,如实例 Post editor,使用 PageHeader 加面包屑、标题、元信息,再自行布局正文;该模式本期未内置。设置页不在本期页面模板范围内,不要强行套用 ListPage 或 PageHeader。工作流/多步流程暂无标准,示例太少,不要过早标准化。

标准列表页骨架:从 @tryghost/shade/page-templates 引入 ListPage,从 @tryghost/shade/patterns 引入 PageHeader、ViewBar、FilterBar,从 @tryghost/shade/components 引入 EmptyIndicator、Table,从 @tryghost/shade/utils 引入 LucideIcon。ListPage.Header 内使用 PageHeader 并设置 sticky={false}、blurredBackground={false},标题、数量、操作分别放入相应插槽;可选 ViewBar 与 FilterBar;ListPage.Body 内为空时渲染 EmptyIndicator,否则渲染 Table。

注意事项:ListPage.Header 内 PageHeader 必须 sticky={false},因为外层已负责吸顶与模糊,否则会出现双层吸顶破坏滚动。不要在 pattern 内使用 useQuery,状态由使用方持有,pattern 只负责布局与组合契约。PageHeader 基于插槽(.Left、.Title、.Count、.Description、.Meta、.Actions、.ActionGroup、.Breadcrumb),不要传一整个 prop 包。FilterBar 为空时自动折叠,可无条件渲染。

不适用 ListPage 时:详情页直接用 PageHeader 并用基础组件搭建正文;设置页沿用周边设置外壳;多步流程用基础组件拼装。权威依据为 Storybook 的 Page Templates/Page Types 及 ListPage、PageHeader 故事。