# Agriculture 设计系统 ## Agriculture 设计系统 界面预览 完成两项前置检查，打开已解锁的复核步骤，并重置本地示例。 ## Agriculture 设计系统 设计参考 AgDS 官方令牌/组件文档与 @ag.ds-next/react 1.35.4 元数据。预览是有据可查的 HTML/CSS 诠释；实际的 React 导入另行提供。 ### 字体角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | xs / sm / md / lg | 14 / 16 / 20 / 24px | 稳定的小到大的角色。 | | xl mobile → desktop | 28 → 32px | 响应式标题角色。 | | xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | 大标题角色。 | | Body family | System UI with Helvetica/Arial fallbacks | 无需下载任何网络字体。 | ### 间距值 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | 相关内容与紧凑内边距。 | | 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | 列、字段、分组与区块。 | | Form field gap | 2 = 32px | FormStack 对应的角色。 | | Fieldset/group gap | 3 = 48px | 分隔问题分组。 | ### 断点 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | xs / sm / md | 0 / 576 / 768px | 移动优先的响应式对象键名。 | | lg / xl / xxl | 992 / 1200 / 1600px | 更大视口的断点阈值。 | ### 浅色配色角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | text / muted | #313131 / #626262 | 主要与辅助内容。 | | action | #00558b | 交互元素。 | | body / bodyAlt | #ffffff / #ebebeb | 成对的界面表面角色。 | | border / borderMuted | #808080 / #d3d3d3 | 关键控件边框与装饰性分隔线的区分。 | ## Agriculture 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Agriculture 设计系统 Core 与 Emotion ### 从真实的 Provider 开始 > AgDS 是一个通过 Emotion 设置样式的 React 库。Core 包裹整个应用，并提供重置样式、CSS 变量与主题配置。所选主题的导入来自 @ag.ds-next/react/ag-branding；它与 Core 相互独立，而不是在各个组件上凭空添加一个 provider 属性。 这个独立样本是对文档化令牌与任务状态的明确 HTML/CSS 诠释。它并不声称运行了 React 库。其状态机有助于考察依赖行为；完整的 React 示例才提供了用于实现的真实组件路径。 阅读配套规范 ## Agriculture 设计系统 系统字体与字号标尺 ### 无需下载字体即可阅读 AgDS 使用系统字体栈，包含平台 UI 字体，并以 Helvetica 和 Arial 作为回退。文档化的字号标尺为 xs 14px、sm 16px、md 20px、lg 24px，更大的角色在移动端会发生变化：xl 28→32px、xxl 32→40px、xxxl 40→48px。 行高通过字体排版机制对齐到 4px 网格。请使用组件提供的 fontSize 与 lineHeight 角色，而不是给每个字号乘以一个随意的比例。预览使用 sm 正文尺寸、32px 移动端 / 40px 更大视口的标题，且不下载任何字体。 阅读配套规范 ## Agriculture 设计系统 间距与响应式属性 ### 数字代表基于 rem 的令牌 在 AgDS 中，间距值 1.5 在标准根字号下表示 24px，而不是 1.5px。文档化的间距序列包括 0.25=4px、0.5=8px、0.75=12px、1=16px、2=32px、3=48px。FormStack 使用 2 作为字段间距，而更大的 fieldset 分组使用 3。 响应式属性接受具名的断点对象。Box padding={{xs:1,md:3}} 从 16px 开始，在 768px 时增至 48px。省略的中间键会继承前一个值。这比一连串互不相关的 CSS 覆盖更为明确。 阅读配套规范 ## Agriculture 设计系统 前景跟随背景 ### 搭配使用浅色与深色角色 颜色参考定义了成对的前景、背景、边框与系统角色。浅色模式下文字为 #313131，弱化文字为 #626262，操作色为 #00558b。深色模式下操作色变为 #9ee8ff，与深色色板相配。操作色用于标识可交互性，不应被随意用作无法打开的任务上的装饰。 预览使用浅色色板，以及带下划线的蓝色操作链接。受阻的工作以文字加说明的形式呈现，而不是一个默默拒绝点击的蓝色控件。完成状态以文字和绿色处理来表达；状态从不单靠颜色传达。 阅读配套规范 ## Agriculture 设计系统 TaskList 即导航 ### 将可用性与完成状态区分开 真实的 TaskList 接受 items 以及一个可选的 ordered 标志。每个条目都有 label 与 status；提供 href 会生成导航，省略 href 则允许使用 onClick 按钮。可用的状态值包括 todo、doing、done、doneRecently、blocked 和 notRequired。 当事务包含多个任务时使用这一结构，尤其是需要跨会话恢复的工作。单个字段无需任务列表。在示例中，商品准备与路线准备是两个彼此独立的先决条件；两者均完成后，审核项才可用。这是本地演示规则，并非进口资格判定。 - todo 表示任务可以开始。 - blocked 表示先决条件导致无法开始；请说明原因。 - notRequired 表示任务已不再适用；它有别于“已完成”。 阅读配套规范 ## Agriculture 设计系统 依赖关系与近期工作 ### 状态徽章并不强制执行规则 应用程序依据两个完成值计算审核能否开始。仅更改徽章标签并不足够：激活处理程序必须执行同一规则。示例中不可用的审核项并非可点击的链接。完成一项先决条件会更新计数，且只有在两项先决条件均满足时才会解锁审核。 文档所述的 doneRecently 状态是返回列表后的临时反馈。预览会短暂高亮刚刚完成的项目，随后稳定为 completed。重置会恢复先决条件状态，使这一过渡可在没有服务器或账户的情况下重复进行。 阅读配套规范 ## Agriculture 设计系统 任务列表旁的上下文 ### 让示例记录保持可见 任务上方的紧凑摘要标明虚构记录、商品与参考编号。这些属性描述的是同一条记录，因此适合使用定义列表。在 React 实现中，SummaryList、SummaryListItem、SummaryListItemTerm 与 SummaryListItemDescription 提供了文档所述的等效组件。 处于活动状态的准备面板仍保持在任务列表下方的常规文档流中。它说明在此演示中“完成”意味着什么，随后提供一次明确的确认操作。面板标题在打开时获得焦点，完成后焦点返回列表标题。它不会假装上传证据、核验许可证或提交申报。 阅读配套规范 ## Agriculture 设计系统 客户端与服务器设置 ### 选择一种明确的渲染路径 对于已有的客户端渲染 React 应用，请安装 @ag.ds-next/react 及其 React 与 Emotion 同级依赖，然后使用此处展示的 Core 组合。无需自行猜测全局 CSS 文件：该库通过 Emotion 生成样式。 Next.js App Router 需要官方 RootStyleRegistry 集成，以便在服务器渲染期间收集并插入 Emotion 样式。文档提供了该注册表以及一个 Core 包装器。仅客户端的示例无法证明服务器渲染的正确性，因此应将所链接的注册表视为该独立集成路径的组成部分。 1. 安装 React 包与 Emotion 依赖。 2. 用 Core 和所选主题包装应用。 3. 从应用状态渲染 TaskList 各项，并在处理程序中强制执行依赖关系。 4. 进行服务器渲染时，集成文档所述的样式注册表并检查水合是否正确。 阅读配套规范 ## Agriculture 设计系统组件示例 ### Core、响应式 Box 与真实的 TaskList 一个带依赖感知本地状态的真实 React 组合；不含导航占位符。 ``` import { useState } from 'react'; import { Core } from '@ag.ds-next/react/core'; import { theme } from '@ag.ds-next/react/ag-branding'; import { Box } from '@ag.ds-next/react/box'; import { TaskList } from '@ag.ds-next/react/task-list'; export default function PreparationTasks() { const [checked, setChecked] = useState(false); const [reviewed, setReviewed] = useState(false); return setChecked(true) }, { label: 'Review the preparation record', status: reviewed ? 'done' : checked ? 'todo' : 'blocked', message: checked ? undefined : 'Complete the commodity check first', onClick: () => { if (checked) setReviewed(true); } } ]} /> ; } ``` 代码参考 ### 单条记录的摘要 使用真实的 SummaryList 组合来呈现具名值。 ``` import { SummaryList, SummaryListItem, SummaryListItemTerm, SummaryListItemDescription } from '@ag.ds-next/react/summary-list'; Example reference PREP-1042 ``` 代码参考 ### 完整的独立示例 完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。 ``` AgDS task dependencies

AGDS PATTERN · FICTIONAL PREPARATION RECORD

Prepare an example consignment

Reference
PREP-1042
Example commodity
Dried botanical samples
Service mode
Local demonstration

Preparation tasks

0 of 2 prerequisites complete

    OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.
    ``` 代码参考 - 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。 - 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。 ## Agriculture 设计系统 AI Agent 设置 ### 实现起点 原生包的元数据与导入均已通过源码核验。曾尝试临时安装原生依赖，但未能完成；独立预览是一种明确的解读，而非所声称的原生 React 构建。“来源”一节中的完整可运行示例 ZIP 也提供了确切的预览依赖与完整文档。将其解压，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/agriculture-agds.html。请勿通过 file:// 打开基于模块的示例。 ``` npm install @ag.ds-next/react@1.35.4 @emotion/react @emotion/cache react react-dom # Existing client-rendered React app: use the complete Core/TaskList example above. # Next.js App Router: additionally integrate the official RootStyleRegistry. ``` ### 适用于你项目的提示词 ``` 使用 AgDS Core 和 TaskList 处理多任务准备事务。显式建模 todo、doing、done、doneRecently、blocked 和 notRequired。在应用逻辑中强制执行先决条件，而不只是依赖徽章文本。使用响应式间距属性、系统字体栈以及前景/背景颜色角色。让记录摘要保持可见，并说明受阻的工作。避免使用政府徽标、虚构的监管决定或伪造的提交成功。 ``` ## Agriculture 设计系统 来源与范围 带有虚构商品准备数据的教育性服务模式示例。它不判定监管资格，也不提交事务。不含机构身份标识。原生 React API 示例与解读性预览被明确区分。 - Agriculture Design System AgDS 资源的官方入口。 - Foundations 核心设计基础。 - 组件 面向服务应用的界面构建块。 - 模式 用于组合完整任务的模式。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## Agriculture 设计系统 相关资源 ### Alberta 设计系统 使用 Alberta 的原生 Web Components 与已发布的设计令牌，构建一份完整的准备清单，具备无障碍选项、派生进度和诚实的审核反馈。 ### Amsterdam 使用 Amsterdam 真实的开源 Switch 契约，搭配完整的中性主题、无障碍标签和即时的阅读偏好设置。 ### B.C. 设计系统 使用真实的语义令牌、原生 React Aria 控件、条件性联系字段和完整的验证行为，构建一个 B.C. 风格的提醒偏好表单。 - [实现参考](https://design-system.agriculture.gov.au/components/task-list) - [来源](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [来源](https://design-system.agriculture.gov.au/foundations/tokens/spacing) - [来源](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints) - [来源](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [阅读配套规范](https://design-system.agriculture.gov.au/components/core) - [阅读配套规范](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [阅读配套规范](https://design-system.agriculture.gov.au/foundations/tokens/spacing/) - [阅读配套规范](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [阅读配套规范](https://design-system.agriculture.gov.au/components/task-list) - [阅读配套规范](https://design-system.agriculture.gov.au/components/summary-list) - [阅读配套规范](https://design-system.agriculture.gov.au/guides/getting-started) - [代码参考](https://design-system.agriculture.gov.au/components/task-list) - [代码参考](https://design-system.agriculture.gov.au/components/summary-list) - [Agriculture Design System AgDS 资源的官方入口。](https://design-system.agriculture.gov.au/) - [Foundations 核心设计基础。](https://design-system.agriculture.gov.au/foundations) - [组件 面向服务应用的界面构建块。](https://design-system.agriculture.gov.au/components) - [模式 用于组合完整任务的模式。](https://design-system.agriculture.gov.au/patterns)