用途:提供使用 SGDS 组件与工具类构建的完整整页模板,视觉风格参考 shadcn Blocks,用于快速生成页面起点,无需从零编写布局代码。适用页面包括内部工具、后台门户、仪表盘、登录/注册、多区段设置或数据录入表单、带搜索筛选分页的数据列表、机构或团队简介页。
前置要求:每个页面必须包含 Application Shell,需先阅读 sgds-pattern-block-templates 的 reference/application-shell.md。外壳提供每页必需的 <sgds-masthead>、<sgds-mainnav>、<sgds-footer>,并规定容器类选择(.sgds-container 或 .sgds-container-sidebar)与粘性页头约定,缺少三者不得生成模板。样式通过一条 import 引入: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。
模板选择:仪表盘对应 reference/dashboard.md,为侧边导航加统计卡片行加数据表,使用 sgds-sidebar(RC 组件),需在其他 SGDS 导入前加载 CDN 脚本;登录页对应 reference/login.md,居中卡片含邮箱密码表单;表单页对应 reference/form-page.md,两列设置布局带标签分区;列表页对应 reference/list-page.md,搜索筛选栏加表格加分页;关于我们对应 reference/about-us.md,两列标题加图片网格、logo 条与成就统计面板。
视觉原则:用 sgds:bg-surface-default、sgds:bg-surface-raised、sgds:bg-surface-overlay 分层;使用语义间距如 sgds:p-layout-md、sgds:gap-layout-md、sgds:p-component-md,而非 sgds:p-4;卡片统一内边距 sgds:p-component-lg、行间距 sgds:gap-layout-md、圆角 sgds:rounded-lg、阴影 sgds:shadow-card;表单动作用 variant="primary"、"outline"、"ghost" tone="danger" 区分层级;统计值用 sgds:text-default sgds:text-2xl sgds:font-semibold,标签用 sgds:text-muted sgds:text-sm。容器宽度与 max-width 工具见 sgds-utilities。具体模板内容、完整属性与更多限制暂未提供。