# gov.cz 设计系统
## gov.cz 设计系统 界面预览
浏览两个页面中的六个原创资源，打开一篇阅读详情，然后返回其操作界面。
## gov.cz 设计系统 设计参考
实际的 @gov-design-system-ce/styles 4.7.1 tokens.css 颜色基元和语义别名。预览使用已发布的样式和 Roboto 包。
### 主色与中性色基元
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --color-primary-50 | rgb(242, 246, 252) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-primary-100 | rgb(226, 238, 248) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-primary-600 | rgb(0, 70, 155) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-primary-700 | rgb(14, 53, 120) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-primary-800 | rgb(16, 38, 87) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-secondary-600 | rgb(250, 180, 19) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-neutral-0 | rgb(255, 255, 255) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-neutral-50 | rgb(246, 246, 246) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
| --color-neutral-950 | rgb(38, 38, 38) | 已发布的 4.7.1 基元值。应用通常应使用对应的语义角色。 |
### 阅读与反馈角色
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --text-primary | var(--color-neutral-950) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --text-secondary | var(--color-neutral-700) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --text-primary-color | var(--color-primary-600) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --text-white | var(--color-neutral-0) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --text-status-error | var(--color-error-700) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --text-status-success | var(--color-success-700) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --status-focus | var(--color-focus-600) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --status-warning | var(--color-warning-400) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
| --status-error | var(--color-error-600) | 保留语义别名，以便清楚呈现其角色；不要将所有别名都简化为互不相关的本地十六进制颜色值。 |
### 主按钮状态
| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --button-solid-primary | var(--color-primary-600) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-solid-primary-hover | var(--color-primary-700) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-solid-primary-active | var(--color-primary-800) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-solid-disabled | var(--color-neutral-200) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-outlined-primary | var(--color-primary-50) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-outlined-primary-hover | var(--color-primary-100) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
| --button-outlined-primary-active | var(--color-primary-200) | 已发布按钮样式实际使用的状态令牌。请区分禁用、悬停和激活状态。 |
## gov.cz 设计系统 完整指南
实用指南，介绍如何为真实界面选择、应用和评审此系统。
完整指导、实现起点和源代码链接。
## gov.cz 设计系统 Gov CE 基础样式与资源加载顺序
### 确保软件包版本保持一致
> 此示例将组件、样式、图标和字体的版本固定为 4.7.1。五个基础样式表按已发布的顺序加载。它们各自的职责不同：仅加载变量并不会为卡片设置样式，仅注册自定义元素也不会引入全局组件 CSS。完整入口会先加载全部五个样式表，再应用少量原创组合样式。
### 在注册组件前初始化配置
图标路径在动态导入组件入口模块之前配置。这个顺序很重要，因为分页会将箭头图标作为自身依赖的一部分进行渲染。请将完整图标目录复制到配置的公共路径，并保留其子目录。成功导入 JavaScript 并不能证明单独的图标请求也成功了。
## gov.cz 设计系统 语义颜色与状态参考
### 让颜色对应明确的角色
此参考区分了蓝色主色基元与文本、焦点及按钮状态别名。若在所有地方使用看起来相同的蓝色，就会抹去这些约定。工具包使用官方的纯色主按钮，并由组件样式表决定其激活、悬停和禁用外观。只有周围的集合布局是 CSS 原创内容。
### 保持字体排版和内容语境清晰可见
Roboto 来自匹配的字体包。卡片包含简短、可操作的标题、一行元数据，以及阅读操作前的摘要。六段资源文本均为原创的 OpenDesign 实践示例，并非翻译自捷克政府官方指南。它们旨在展示信息层级和完整的本地交互，而不冒充政府服务。
## gov.cz 设计系统 卡片插槽与阅读操作
### 将标题放入受支持的插槽
每个 gov-card 都会在 headline 插槽中接收标题。元数据、描述和按钮构成卡片内容。操作按钮的 aria-label 包含资源标题，从而让辅助技术能够区分多个重复的“阅读资源”按钮。该组件会将 ARIA 属性传递给其内部交互元素；自行添加一个未经定义的 accessible-label 属性并不会产生同样的效果。
### 将布局放在组件契约之外
三列 CSS 网格在窄屏上会变为单列。该网格及其断点是为此示例编写的，并非额外的官方卡片属性。预览还会在极窄的嵌入式容器中移除全局 320px 的 body 最小宽度。这项有限的布局调整保留了组件样式，同时避免父页面发生溢出。
## gov.cz 设计系统 原生分页与应用状态
### 读取原生事件负载
gov-pagination 接收 total=6 和 page-size=3。其 gov-page 事件会提供 detail.pagination.currentPage，用于选择对应的三条记录。分页组件负责当前页控件；应用负责数据集和可见的数据切片。为这项英文示例明确替换了所有默认的捷克语导航标签。
- total 表示记录数量，而非页数。
- page-size 控制数据切片的长度。
- gov-page 会提供 detail.pagination.currentPage。
- 导航标签必须与界面语言一致。
### 翻页后避免显示过时的详情
切换页面时会关闭当前打开的资源，避免详情看起来像是属于另一组卡片。计数会显示“资源 1–3，共 6 项”或“资源 4–6，共 6 项”。这是对已知小型数据集进行的本地分页，因此不会添加虚假的加载动画，也不会声称从服务器获取数据。基于服务器的实现需要另行定义待处理、错误和结果状态契约。
## gov.cz 设计系统 阅读焦点与返回行为
### 将焦点移至打开的资源
阅读操作会填充本地详情区域，并将焦点移至其标题。这样，执行在内容集合下方新增内容的操作后，键盘用户可以明确知道焦点所在位置。标题使用 tabindex=-1，以便应用能够将焦点移至该处，同时不将其作为额外的常规 Tab 停靠点。打开的内容仍是普通的可读文本。
### 返回到触发操作的按钮
“返回资源”会隐藏详情，并将焦点移回原先的内部按钮。这不是模态框：它不会锁定焦点、添加对话框语义，也不会使页面变暗。原始内容集合仍可访问。反复执行打开、关闭和翻页操作，可以检验应用状态与焦点是否始终跟随同一资源。
## gov.cz 设计系统 完整的本地集成
### 配套使用提供的文件
入口文件包含完整的应用代码，包括六条记录、卡片创建、分页处理和详情焦点管理。样式表仅包含原创布局。安装四个固定版本的软件包，复制图标，并将两个文件保存到 vanilla Vite 项目中。浏览器预览仅打包这些组件入口和本地字体资源。
1. 安装全部四个版本为 4.7.1 的 Gov CE 软件包。
2. 将图标复制到 public/assets/gov-cz-icons，并保留子目录结构。
3. 将完整的 JavaScript 和布局 CSS 保存到 src。
4. 运行应用并检查分页、焦点返回和图标请求。
### 验证交互和资源加载
打开第一项资源，将焦点返回其按钮，翻到第二页，再阅读另一项资源。确认位于开头时禁用“第一页”和“上一页”控件，位于末尾时禁用“下一页”和“最后一页”控件。在桌面、手机以及更窄的嵌入式宽度下检查相同流程。检查网络面板，确认图标没有缺失，并排查 JavaScript 错误。
## gov.cz 设计系统组件示例
### main.js — 完整分页工具包
完整数据、原生组件注册、页面切片和阅读焦点。
```
import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
{title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
{title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
{title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
{title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
{title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
{title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`
OPENDESIGN · ORIGINAL SERVICE TOOLKIT
Small steps toward a clearer service
Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.
Back to resources`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`