sgds-pattern-page-templates

SGDS 页面模板

可立即使用的整页模板，采用 SGDS 组件和实用工具类，并根据 shadcn Blocks 的视觉模式改编而成。每个模板都能为你提供精美的起点，无需从头编写布局代码。

前提条件

每个页面都必须包含 Application Shell。 生成任何页面前，请阅读 sgds-pattern-block-templates → reference/application-shell.md。Shell 会在每个页面中提供必需的 <sgds-masthead>、<sgds-mainnav> 和 <sgds-footer>，以及容器类选择（.sgds-container 与 .sgds-container-sidebar）和粘性页眉规范。生成页面模板时，必须包含这三个 Shell 组件。

import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";

完整安装说明请参阅 sgds-getting-started 和 sgds-components。

有关这些模板使用的容器宽度和最大宽度实用工具类，请参阅 sgds-utilities。

---

快速选择指南

你要构建的内容	应使用的模板
内部工具、管理门户、仪表板	仪表板
登录页面	登录
多字段设置或数据录入表单	表单页面
带搜索、筛选和分页的数据列表	列表页面
公司／机构简介、团队介绍、成就展示	关于我们

---

→ 阅读 reference/dashboard.md

侧边栏导航 + 统计卡片行 + 数据表格。适用于仪表板、管理门户和内部工具。

注意：仪表板模板使用 sgds-sidebar（RC 组件）。请在其他 SGDS 导入项之前加载 CDN 脚本；CDN 标签和框架设置请参阅 sgds-components sidebar reference。

→ 阅读 reference/login.md

居中卡片，包含电子邮件／密码表单。适用于身份验证、登录和注册页面。

→ 阅读 reference/form-page.md

双栏设置布局，包含带标签的表单分区。适用于设置页面、个人资料页面和多分区数据录入。

→ 阅读 reference/list-page.md

搜索 + 筛选栏 + 表格 + 分页。适用于记录列表、搜索结果和数据管理页面。

→ 阅读 reference/about-us.md

双栏标题 + 图片网格 + 标志条 + 成就统计面板。适用于机构简介、产品介绍页面和团队介绍。

---

视觉层级原则（适用于所有模板）

以下规则能让 SGDS UI 更精致，是 shadcn/Mantine 使用的同类原则：

1. 通过背景分层营造纵深感

• 页面背景：sgds:bg-surface-default（基础画布）
• 卡片／面板：sgds:bg-surface-raised（让内容从页面上凸显）
• 嵌套内容区域：少量使用 sgds:bg-surface-overlay

2. 使用语义化间距，而非原始数字 优先使用 sgds:p-layout-md、sgds:gap-layout-md、sgds:p-component-md，而不是 sgds:p-4。语义化令牌具有响应式特性，并能表达设计意图。务必在分区和元素之间留白——切勿在没有间距的情况下渲染区块。 完整默认值表请参阅 sgds-utilities-spacing。

3. 保持卡片结构一致 每张卡片都应包含：内部留白（sgds:p-component-lg）、卡片行之间的间距（sgds:gap-layout-md）、圆角（sgds:rounded-lg）和柔和阴影（sgds:shadow-card）。

4. 表单中的操作层级 主要操作 → <sgds-button variant="primary">。次要／取消操作 → <sgds-button variant="outline">。破坏性操作 → <sgds-button variant="ghost" tone="danger">。

5. 标签弱化，数值突出 在统计卡片和描述列表中：标签使用 sgds:text-muted sgds:text-sm，数值使用 sgds:text-default sgds:text-2xl sgds:font-semibold。