# Queensland Government 设计系统 ## Queensland Government 设计系统 界面预览 选择带插图的资源，在原生模态框中查看资源名称，并编辑本地列表。 ## Queensland Government 设计系统 设计参考 实际的 @qld-gov-au/qgds-bootstrap5 2.4.1 CSS 导出项和 Bootstrap 模态框行为，本地加载 Noto Sans。 ### 默认浅色调色板 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-action-primary-hover | #003e96 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-background-default | #ffffff | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-background-alt | #e3e7ea | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-focus-default | #002e85 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-link-default | #005eb8 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-link-visited | #551a8b | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-text-default | #353535 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | | --qld-color-default-color-light-text-heading | #000053 | 实际的 QGDS Bootstrap 2.4.1 浅色角色。请与对应的浅色界面表面搭配使用。 | ### 默认深色调色板 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-background-default | #005eb8 | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-background-alt | #001d74 | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-focus-default | #c6ffff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-link-default | #ffffff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-link-visited | #f2cdff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-text-default | #ffffff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | | --qld-color-default-color-dark-text-heading | #ffffff | 实际的配对深色角色；在深色界面表面上使用浅色前景色之前，请先确认其预期配对。 | ### 正文、圆角与模态框几何规格 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-body-font-size | 1rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-body-line-height | 1.5 | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius | .25rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius-sm | .25rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius-lg | .25rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius-xl | 1rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius-xxl | 2rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-border-radius-pill | 50rem | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-modal-border-radius | var(--qld-border-radius-lg) | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | | --qld-modal-title-line-height | 1.5 | 导出的实现值。原创资源插图的颜色和 8px 卡片圆角是示例设计选择，并非额外的官方主题令牌。 | ## Queensland Government 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Queensland Government 设计系统 选择 Queensland 实现方案 ### 准确说明运行时 > Queensland 文档介绍了多种实现路径。本研究使用公开的 @qld-gov-au/qgds-bootstrap5 软件包 2.4.1 及其 Bootstrap 模态框行为，并不声称运行较新的 Lit Web 组件系列。明确标注实现名称和版本，可避免读者将名称相似但初始化规则不兼容的组件混为一谈。 ### 区分稳定示例与开发中的系列 官方 Web 组件仓库将当前系列标记为 alpha，而较早的 Vanilla 路径则是独立的参考实现。此处可运行的示例始终采用同一条经过测试、基于 Bootstrap 的实现路径。未来迁移时，应重新核对标记、令牌名称和组件契约，而不是只替换样式表 URL。 ## Queensland Government 设计系统 主题角色与资源插图 ### 结合查看浅色和深色角色 参数表包含实际软件包中的浅色和深色配对角色。主要操作、链接颜色、焦点和文本角色会随界面表面背景而变化。当前资源包采用浅色构图；深色条目是参考值，并不表示页面提供主题切换控件。 ### 使用插图，但不臆造品牌令牌 每张卡片都包含一幅原创的编号文档插图。四种柔和的插图背景用于区分自行设计的资源类型。这些颜色和 8px 外层卡片圆角属于应用样式，与已发布的角色表分开标注。界面以库提供的实际按钮、复选框样式和模态框样式为基础。 ## Queensland Government 设计系统 字号层级与卡片内容 ### 加载公开的正文字体 该软件包的正文角色使用无衬线字体系列，字号为 1rem，行高为 1.5。预览会加载本地 Noto Sans 字体文件，因此不依赖 Google Fonts 的远程请求。即使卡片折叠为单列，标题、说明和已选数量状态仍清晰易读。 ### 为每项资源提供实用说明 每张卡片都标明资源类型、供参考的阅读时长、具体标题和简短用途。时长是自行设定的工作坊估算值，并非使用情况分析数据。选择标签会重复资源名称，确保辅助技术单独读出该操作时仍能理解其含义。不会将整张卡片变成含义不清的点击目标。 ## Queensland Government 设计系统 复选框选择与派生反馈 ### 未选择任何资源时禁用查看操作 使用独立复选框，可自由组合选择四项资源。Set 用于保存已选索引；数量和查看列表则从该状态派生。Set 为空时，查看选择按钮处于禁用状态。这样可以避免打开没有有效内容的对话框，同时通过清晰显示的零数量说明原因。 - 多资源列表使用独立复选框。 - 确保已选数量与对话框内容源自同一份数据。 - 在每个复选框标签中注明资源名称。 ### 任何更改后清除过时的确认结果 在本地确认后，如果又选择或移除其他资源，旧结果就会隐藏。这样，摘要不会在列表已更改后仍显示得仿佛反映当前列表。清空列表时会重置 Set 和实际的复选框输入，然后将焦点移回第一个选项。此预览不会生成或传输任何文件。 ## Queensland Government 设计系统 查看对话框并返回焦点 ### 使用原生模态框作为查看界面 Bootstrap Modal 实例会打开一个由其标题标注的对话框。主体内容列出当前已选资源的名称，操作按钮则可供用户继续编辑或在本地确认。按 Escape 键或使用关闭控件都可以关闭对话框。原生隐藏事件触发时，应用会将焦点还给“查看选择”按钮。 ### 避免不必要的过渡竞争 示例不使用可选的淡入淡出类。这样，无论快速确认还是按 Escape 键，都能立即关闭对话框，不会因显示过渡仍在运行而被忽略。模态框仍会提供焦点管理和背景遮罩行为。理解查看操作是否已生效，不应依赖动画效果。 ## Queensland Government 设计系统 完整的资源包实现 ### 精确重建本地示例 创建 Vite 原生项目，并使用 Bootstrap 和 Noto Sans 安装固定版本的 QGDS Bootstrap 软件包。使用软件包导出的 qld.bootstrap.css 路径，不要猜测 dist 内部路径。保存完整的入口文件和 queensland.css，并包含根挂载元素。源代码包含全部资源记录、原创 SVG 插画、选择逻辑和模态框过渡。 1. 安装固定版本的 QGDS Bootstrap 软件包和公开字体。 2. 使用其导出的样式表路径，并提供完整入口文件和 CSS。 3. 选择两项资源，测试 Escape 键和焦点返回。 4. 在本地确认后修改所选项，并验证旧结果已清除。 ### 明确模态框过渡和焦点规则 QGDS Bootstrap 方案使用 Bootstrap Modal，因此关闭操作应遵循原生模态框生命周期。不要猜测延迟时间，而应在 hidden.bs.modal 之后将焦点还给“查看所选项”按钮。如果之后添加淡入淡出效果，请考虑过渡期间的行为：模态框正在打开时立即请求隐藏，可能会被忽略。 打开模态框时，根据当前选择生成审核列表；复选框状态发生变化后，清除之前在本地确认的结果。按 Escape 键应关闭审核界面，但不改变所选项。将复选框的交互区域与卡片插画分开，可以避免整张卡片的点击行为相互冲突，也能为每项资源提供明确的可访问选择标签。 ## Queensland Government 设计系统组件示例 ### main.js — 完整的资源选择和模态框审核逻辑 包含完整的原始数据、插画、复选框状态和原生模态框集成。 ``` import Modal from 'bootstrap/js/dist/modal'; import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css'; import '@fontsource/noto-sans/latin-400.css'; import '@fontsource/noto-sans/latin-700.css'; import './queensland.css'; const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()}); ``` 代码参考 - 该软件包的样式表通过导出的入口点加载。本地确认不会下载文件，也不会提交到服务端。 ### queensland.css — 原创卡片布局 响应式卡片和装饰性文档插画，搭配原生组件样式。 ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` 代码参考 - 插画配色和卡片外形均为应用自行设计。 ## Queensland Government 设计系统 Agent 设置 ### 实现起点 预览内嵌公开字体资源并运行原生模态框行为；未实现服务端提交。 ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### 适用于你项目的提示词 ``` 使用 QGDS Bootstrap 2.4.1、真实调色板角色和原生 Modal，构建昆士兰资源包示例。保留复选框标签、派生计数、空选择时禁用审核、Escape 键关闭、焦点返回和过期结果清除等行为。原创插画应与官方主题令牌区分开来，也不要暗示资源会真实发放。 ``` ## Queensland Government 设计系统 来源与范围 这是一个基于 OpenDesign 和 QGDS Bootstrap 2.4.1 的原创资源包示例，采用 Bootstrap 实现，而非 alpha 版 Web Components 技术流。选择仅在本地生效，不会发送任何资源。 - 实现方案 原生、Bootstrap 和开发中的 Web Components 方案。 - 带版本号的 Bootstrap 源码 已发布的 CSS、资源和实现方案。 - 卡片指南 内容层级与卡片用法。 - Web Components 状态 明确标注 alpha 状态，并采用独立的集成约定。 ## Queensland Government 设计系统 相关资源 ### Ripple 通过完整的工作坊时间线，了解 Ripple 实际的色彩用途、14 级间距比例和响应式字体参考；其中还包括渐进式披露、进度提示和用于下一步操作的键盘焦点。 ### Scottish Government 设计系统 通过原生字符计数字段应用苏格兰政府的响应式字号、间距和颜色语义；超出限制的文本仍会保留，并支持后续调整。 ### Singapore Government 设计系统 使用当前版本的 SGDS Web Components、真实的响应式设计令牌、日间和夜间主题，以及保持本地计划同步的原生范围数量输入控件。 - [实现参考](https://github.com/qld-gov-au/qgds-bootstrap5) - [来源](https://github.com/qld-gov-au/qgds-bootstrap5) - [代码参考](https://github.com/qld-gov-au/qgds-bootstrap5) - [代码参考](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [实现方案 原生、Bootstrap 和开发中的 Web Components 方案。](https://www.designsystem.qld.gov.au/get-started/developing) - [带版本号的 Bootstrap 源码 已发布的 CSS、资源和实现方案。](https://github.com/qld-gov-au/qgds-bootstrap5) - [卡片指南 内容层级与卡片用法。](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Web Components 状态 明确标注 alpha 状态，并采用独立的集成约定。](https://github.com/qld-gov-au/qgds-web-components)