Создавайте многоэтапные сценарии обслуживания с помощью конкретных значений отступов AgDS, адаптивных свойств и модели статусов TaskList. Попробуйте подготовительный процесс, где этап проверки становится доступен только после выполнения предварительных условий.
Оригинальная интерпретация значений токенов AgDS и семантики статусов TaskList на HTML/CSS/JS; не нативный рендеринг React. · Справочник по реализации
02
Дизайн-система Agriculture Справочник по дизайну
Официальная документация AgDS по токенам и компонентам, а также метаданные @ag.ds-next/react 1.35.4. Предварительный просмотр — задокументированная интерпретация на HTML/CSS; импорты React предоставляются отдельно.
AgDS — библиотека React со стилями на основе Emotion. Core оборачивает приложение и предоставляет стили сброса, переменные CSS и конфигурацию темы. Импорт выбранной темы берётся из @ag.ds-next/react/ag-branding; он подключается отдельно от Core, а не задаётся через выдуманное свойство провайдера каждого компонента.
Автономный пример — это явная интерпретация задокументированных токенов и состояний задач на HTML/CSS. Он не претендует на запуск библиотеки React. Его машина состояний помогает изучить поведение зависимостей; в полном примере React показан реальный путь реализации с компонентами.
Дизайн-система Agriculture Типографика и шкала размеров системы
Читаемый текст без загрузки шрифтов
В AgDS используется системный стек шрифтов, включающий системный шрифт интерфейса платформы, а также 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
Значение gap 1.5 в AgDS соответствует 24px при стандартном размере корневого элемента; это не 1.5px. Задокументированная шкала отступов включает 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px и 3=48px. FormStack использует значение 2 для интервалов между полями, а для более крупных групп полей — 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 служит временным подтверждением после возвращения к списку. В предварительном просмотре только что выполненная задача ненадолго выделяется, а затем отображается как завершённая. Сброс восстанавливает исходные предварительные условия, позволяя повторить переход без сервера или учётной записи.
Дизайн-система Agriculture Контекст рядом со списком задач
Оставьте запись примера на виду
Компактная сводка над списком задач указывает вымышленную запись, товар и ссылку. Эти атрибуты описывают одну запись, поэтому здесь уместен список определений. В реализации на React документированным аналогом служат SummaryList, SummaryListItem, SummaryListItemTerm и SummaryListItemDescription.
Активная панель подготовки располагается в обычном потоке документа под списком задач. В ней объясняется, что означает выполнение в этом примере, а затем предлагается подтвердить его. При открытии фокус переводится на заголовок панели, а после выполнения — на заголовок списка. Панель не имитирует загрузку подтверждающих документов, проверку лицензии или отправку декларации.
Дизайн-система Agriculture Настройка клиента и сервера
Выберите конкретный путь рендеринга
Чтобы использовать существующее клиентское приложение React, установите @ag.ds-next/react вместе с зависимостями React и Emotion, а затем примените показанную здесь композицию Core. Отдельный файл CSS с предположительными глобальными стилями не нужен: библиотека генерирует стили с помощью Emotion.
Для Next.js App Router при рендеринге на сервере требуется официальная интеграция RootStyleRegistry, которая собирает и вставляет стили Emotion. В документации приведены этот реестр и обёртка Core. Пример только для клиента не подтверждает корректность серверного рендеринга; рассматривайте связанный реестр как часть отдельного пути интеграции.
Установите пакет React и зависимости Emotion.
Оберните приложение в Core и выбранную тему.
Формируйте элементы TaskList из состояния приложения и проверяйте зависимости в обработчиках.
Для серверного рендеринга подключите задокументированный реестр стилей и проверьте гидратацию.
Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AgDS task dependencies</title><style>*{box-sizing:border-box}body{margin:0;color:#313131;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}main{max-width:62rem;padding:48px 24px;margin:auto}h1{font-size:40px;line-height:1.2;margin:16px 0 24px}h2{font-size:24px;line-height:1.3}header{border-bottom:4px solid #00558b;padding-bottom:24px}.meta{display:flex;flex-wrap:wrap;gap:24px}dt{font-weight:bold}dd{margin:4px 0 0}.tasks{padding:0;list-style:none;margin:24px 0}.task{padding:24px 0;border-bottom:1px solid #d3d3d3;display:grid;grid-template-columns:1fr auto;gap:8px 24px}.task button{background:none;border:0;padding:0;text-decoration:underline;color:#00558b;font-family:inherit;font-size:18px;font-weight:700;line-height:1.5;text-align:left;cursor:pointer}.task p{grid-column:1/-1;margin:0;color:#626262}.status{font-size:14px;border:1px solid #808080;padding:2px 8px;align-self:start;white-space:nowrap}.task[data-state=doneRecently]{background:#e5fff6}.task[data-state=done] .status,.task[data-state=doneRecently] .status{color:#00754e}.task[data-state=blocked]{color:#626262}.panel{padding:24px;background:#f5f5f5;border-left:4px solid #00558b}.panel h2{margin-top:0}.action{font-family:inherit;font-size:16px;font-weight:700;line-height:1.5;background:#00558b;color:#fff;border:2px solid #00558b;padding:10px 16px;cursor:pointer}.reset{font:inherit;padding:10px 16px;background:white;border:2px solid #00558b;color:#00558b;margin-top:24px}button:focus-visible,h2:focus{outline:3px solid #9263de;outline-offset:4px}small{display:block;color:#626262;margin-top:24px;font-size:14px}[hidden]{display:none!important}@media(max-width:767px){main{padding:24px 16px}h1{font-size:32px}.task{grid-template-columns:1fr}.status{justify-self:start}.meta{gap:16px}.panel{padding:16px}}
</style><main><header><p>AGDS PATTERN · FICTIONAL PREPARATION RECORD</p><h1>Prepare an example consignment</h1><dl class="meta"><div><dt>Reference</dt><dd>PREP-1042</dd></div><div><dt>Example commodity</dt><dd>Dried botanical samples</dd></div><div><dt>Service mode</dt><dd>Local demonstration</dd></div></dl></header><h2 id="list-heading" tabindex="-1">Preparation tasks</h2><p id="count" role="status">0 of 2 prerequisites complete</p><ol class="tasks" id="tasks"></ol><section class="panel" id="panel" hidden><h2 id="panel-heading" tabindex="-1"></h2><p id="panel-description"></p><button class="action" id="complete" type="button">Mark example check complete</button></section><button class="reset" type="button" id="reset">Reset example</button><small>OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.</small></main><script>
let done=[false,false],recent=-1,current=-1,reviewed=false,timer;const names=['Check commodity description','Check collection route','Review preparation record'];const descriptions=['Confirm that the fictional record says dried botanical samples. In a real service, this task would open the actual commodity questions.','Confirm that this example uses a local demonstration route. This does not check an actual transport route or import condition.','Both preparation checks are complete. This local review confirms only that the example tasks were visited; it does not submit a declaration.'];const tasks=document.querySelector('#tasks'),panel=document.querySelector('#panel');function render(){tasks.replaceChildren();for(let n=0;n<3;n++){const blocked=n===2&&!done.every(Boolean),complete=n<2?done[n]:reviewed;const state=blocked?'blocked':recent===n?'doneRecently':complete?'done':current===n?'doing':'todo';let li=document.createElement('li');li.className='task';li.dataset.state=state;let trigger=document.createElement(blocked?'strong':'button');trigger.textContent=names[n];if(!blocked){trigger.type='button';trigger.onclick=()=>{current=n;panel.hidden=false;document.querySelector('#panel-heading').textContent=names[n];document.querySelector('#panel-description').textContent=descriptions[n];document.querySelector('#complete').textContent=n===2?'Finish local review':'Mark example check complete';render();document.querySelector('#panel-heading').focus()}}let s=document.createElement('span');s.className='status';s.textContent={blocked:'Cannot start yet',done:'Completed',doneRecently:'Completed',doing:'In progress',todo:'Not started'}[state];li.append(trigger,s);if(blocked){let p=document.createElement('p');p.textContent='Complete both preparation checks before review.';li.append(p)}tasks.append(li)}document.querySelector('#count').textContent=done.filter(Boolean).length+' of 2 prerequisites complete'+(reviewed?' · Local review completed':'')};document.querySelector('#complete').onclick=()=>{if(current<2)done[current]=true;else reviewed=true;recent=current;current=-1;panel.hidden=true;render();document.querySelector('#list-heading').focus();clearTimeout(timer);timer=setTimeout(()=>{recent=-1;render()},2000)};document.querySelector('#reset').onclick=()=>{clearTimeout(timer);done=[false,false];recent=current=-1;reviewed=false;panel.hidden=true;render()};render();
</script></html>
Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.
Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.
04
Дизайн-система Agriculture Настройка AI-агента
Отправная точка для реализации
Метаданные нативного пакета и импорты сверены с исходным кодом. Попытка временно установить нативные зависимости не завершилась; автономный предварительный просмотр — явная интерпретация, а не заявленная нативная сборка React. ZIP-архив полного рабочего примера в разделе «Источники» также содержит точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, выполните в этой директории команду python3 -m http.server 8080, затем откройте http://localhost:8080/agriculture-agds.html. Не открывайте примеры с модулями через file://.
bash
npm install @ag.ds-next/[email protected] @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.
Запрос для вашего проекта
Промпт для AI-агента
Используйте Core и TaskList из AgDS для операции подготовки с несколькими задачами. Явно моделируйте состояния todo, doing, done, doneRecently, blocked и notRequired. Проверяйте предварительные условия в логике приложения, а не только по тексту значка. Используйте адаптивные свойства отступов, системный стек шрифтов и роли цветов текста и фона. Не скрывайте сводку записи и объясняйте, почему задача заблокирована. Не используйте логотипы государственных органов, не выдумывайте решения регулирующих органов и не имитируйте успешную отправку.
05
Дизайн-система Agriculture Источники и область применения
Пример образовательного шаблона сервиса с вымышленными данными о подготовке товара. Он не определяет соответствие нормативным требованиям и не отправляет транзакцию. Без опознавательных знаков ведомства. Примеры React API и интерпретированный предварительный просмотр чётко разграничены.
