用途:为基于 SGDS Web Component 的项目提供开箱即用的整页模板,覆盖运营应用外壳、后台管理仪表盘、目录/搜索筛选、仪表盘、登录页、表单页、关于我们、落地页、博客/内容页等常见页面类型。资料内附快速决策表,按要构建的页面直接指向对应模板参考文件。
主要能力与前置要求:每个页面都必须包含 Application Shell,生成任何页面前应先阅读 sgds-blocks 的 reference/application-shell.md;外壳提供必需的 sgds-masthead、sgds-mainnav 和 sgds-footer,并包含容器类选择(.sgds-container 与 .sgds-container-sidebar)及粘性头部约定,规定不得在缺少这三个外壳组件的情况下生成页面模板。样式引入示例为:import "@govtechsg/sgds-web-component/themes/day.css"; 及 css/sgds.css、css/utility.css,完整安装见 sgds-getting-started 与 sgds-components。仪表盘模板使用 RC 组件 sgds-sidebar,需在其他 SGDS 导入前先加载 CDN 脚本。
使用方式:各模板在 stories/templates/ 目录中有可运行实现,可通过 raw GitHub 链接获取完整源码,例如 curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js。提取 HTML 的步骤为:先取原始文件,再从 Template 函数返回的 html 模板字面量中定位 HTML 区块,随后删除 html`` 包装、移除 Lit 的 ${variable} 插值、移除 <style> 块、保留全部 sgds-* 元素与 sgds: 工具类并按 2 空格缩进格式化,最后按 sgds-blocks 模式组织参考文件。
视觉规范:模板统一遵循分层背景(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)、统一卡片结构、表单操作层级(主按钮 primary、次按钮 outline、危险操作 ghost + tone="danger")以及标签弱化、数值突出的展示原则。
限制:资料未提供各模板的具体功能实现细节、兼容性范围、性能或收费信息,这些内容暂未提供;使用前需自行核对依赖组件版本。