# Дизайн-система Arco Design ## Предварительный просмотр интерфейса дизайн-системы Arco Design Ищите, выбирайте, добавляйте и удаляйте разделы отчёта, а затем подготовьте отдельный локальный план. ## Справочник по дизайн-системе Arco Design Исходный код Arco React. Константы Less указаны с префиксом @; переменные CSS во время выполнения — с --. Отступы и компоновка панелей предварительного просмотра — оригинальные решения для приложения, основанные на этих шкалах. ### Размеры и отступы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | @size-mini | 24px | Псевдоним высоты компактного компонента. | | @size-small | 28px | Высота маленького компонента. | | @size-default | 32px | Высота стандартного компонента. | | @size-large | 36px | Высота большого компонента. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Небольшие шаги отступов. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Шаги для группировки. | | @border-radius-small | 2px | Малые скругления. | | @border-radius-medium | 4px | Средние скругления. | | @border-radius-large | 8px | Большие скругления. | ### Типографика и анимация | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | @font-size-body | 14px | Глобальный размер основного текста. | | @line-height-base | 1.5715 | Приблизительная высота строки 22px при размере шрифта 14px. | | @font-family | Inter, system and CJK fallbacks | Название Inter не загружает этот шрифт. | | @code-family | Consolas, Menlo | Стек шрифтов для отображения кода. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | Первые три константы длительности. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Опубликованная стандартная кривая. | ### Опорные цвета палитры | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | @arcoblue-6 | #165dff | Опорный оттенок синего Arco. | | @gray-1 | #f7f8fa | Светлый нейтральный оттенок. | | @gray-2 | #f2f3f5 | Нейтральный цвет вторичной заливки. | | @gray-3 | #e5e6eb | Нейтральный цвет границы. | | @gray-8 | #4e5969 | Нейтральный цвет вторичного текста. | | @gray-10 | #1d2129 | Основной цвет текста. | | @red-6 | #f53f3f | Опорный красный оттенок; не считайте его автоматически контрастным для мелкого текста. | | @green-6 | #00b42a | Опорный зелёный оттенок. | ### Соглашения для переменных времени выполнения | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-text-1 | Primary text role | Префикс переменных по умолчанию — не arco. | | --color-fill-2 | Secondary fill role | Используйте вместо жёстко заданного серого цвета в областях, учитывающих тему. | | --border-radius-medium | Medium corner role | Экспортируется во время выполнения. | | body[arco-theme="dark"] | Dark theme selector | Задайте или удалите атрибут body. | | --color-bg-2 | Container surface | В тёмном режиме значение меняется. | ### Состояние и события Transfer | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Для обозначения разделов используются устойчивые ключи. | | targetKeys | string[] | Принадлежность к целевому столбцу. | | selectedKeys | string[] | Выбор флажком, а не принадлежность к целевому набору. | | onChange | (newTargetKeys,direction,moveKeys) | Зафиксируйте новый массив элементов. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Для управляемого selectedKeys используйте оба значения. | | filterOption | (inputValue,item) => boolean | По умолчанию поиск выполняет регистрозависимое сопоставление по подстроке. | | showSearch | Boolean or per-list configuration | В примере поиск включён в обоих столбцах. | | oneWay | Boolean | Используйте только если не нужно удалять элементы из целевого набора. | | simple | Boolean or retainSelectedItems options | При выборе может перемещать элементы; это не то же самое, что явные действия переноса. | ## Полное руководство по дизайн-системе Arco Design Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система Arco Design: Transfer показывает принадлежность к набору, а не просто список флажков ### Продуманно выбирайте разделы отчёта > Arco Transfer подходит для случаев, когда оператору нужно сравнить два списка: доступные разделы и разделы, включённые в отчёт. Выбор строки отмечает её для последующего действия; раздел перемещается не сразу, если только не включён простой режим. В примере сохранено явное разделение действия на два шага. Пользователь выбирает «Каналы привлечения», нажимает «Включить», а затем подготавливает план. План представляет собой отдельный снимок, поэтому последующие изменения в редакторе не изменяют подготовленную версию незаметно для пользователя. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Используйте шкалы размеров и отступов отдельно ### Одинаковое число может обозначать разные величины Константы размеров Arco увеличиваются с шагом 4 пикселя, тогда как шкала отступов начинается со значений 2, 4, 6, 8, 10 и 12, а затем переходит к более крупным шагам. Размер компонента по умолчанию соответствует 32px. Если считать, что суффикс каждого размера или отступа обозначает одну и ту же величину, элементы управления будут иметь непоследовательные размеры. В этой оригинальной композиции у двух панелей переноса средний радиус скругления, а отступ страницы составляет 24px. Небольшие флажки и разделители строк поддерживают плотный список для выбора; более крупные области страницы обеспечивают визуальное разделение, не заменяя полезное содержимое чрезмерно большими карточками. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Сохраняйте семантические роли в стилях приложения ### CSS Для переменных действует собственное соглашение об именовании Тема по умолчанию экспортирует переменные, например --color-text-1 и --color-fill-2, без префикса arco. В пользовательских сборках этот префикс может отличаться, поэтому при интеграции в приложение с пространством имён проверьте скомпилированную тему. Переменные основной палитры содержат каналы RGB; используйте rgb(var(--primary-6)), а не воспринимайте переменную как готовый цвет в формате hex. В примере для основного действия и выбранных строк используется проверенный эталонный синий Arco. Для недоступного раздела показаны неактивный флажок и поясняющий текст, а не красный цвет, который мог бы создать впечатление об ошибке, исправимой оператором. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Поддерживайте компактные подписи и длинные названия разделов ### Практичный размер основного текста Размер основного текста по умолчанию — 14px, межстрочный интервал — 1.5715 от размера шрифта. Опубликованный стек начинается с Inter и включает системные шрифты и шрифты с поддержкой CJK. Это стек CSS, а не подтверждение того, что файл шрифта Inter был загружен. Название раздела отчёта может быть длиннее примера. В автономной версии текст строк переносится, а на узком экране панели располагаются одна над другой, чтобы подписи «Включить» и «Удалить» оставались читаемыми. Вместо этого весь виджет переноса не сжимается до размера, при котором текст становится неразборчивым. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Два управляемых массива исключают неоднозначное поведение ### Принадлежность к списку и выбор — разные состояния targetKeys определяет, какие элементы входят в отчёт. selectedKeys содержит флажки, отмеченные в данный момент в обоих списках. onSelectChange возвращает массивы левого и правого списков; объедините их при управлении selectedKeys. onChange возвращает новый состав списка, направление и перемещённые ключи. 1. Сохраняйте стабильность ключей исходных элементов, даже если меняются отображаемые подписи. 2. Объединяйте массивы выбранных элементов слева и справа в onSelectChange. 3. Заменяйте targetKeys новым массивом из onChange. 4. После перемещения сбрасывайте временный выбор и сообщайте о его результате в текущем списке. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Поиск должен сужать отображение, не меняя состав списка ### Явно задайте правило поиска Фильтр по умолчанию в исходном коде сравнивает запрос со значением элемента с помощью проверки наличия подстроки с учётом регистра. В примере эта проверка заменена на поиск в нижнем регистре. Если поиск скрыл выбранную строку, это не должно создавать впечатление, что она исключена из отчёта. Для такого небольшого списка пагинация и виртуализация почти не дают преимуществ. Arco предоставляет эти возможности для более объёмных данных, но за стабильные ключи, полный набор целевых элементов и правила выбора элементов в отфильтрованных списках по-прежнему отвечает приложение. - Для доступных и включённых списков предусмотрены отдельные поля поиска с понятными подписями. - Сообщение об отсутствии совпадений относится к отфильтрованному представлению, а не к пустому набору данных. - При подготовке плана используйте targetKeys, а не только видимые сейчас строки. Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. В тёмном режиме меняются не только текст, но и поверхности ### Задайте опубликованный селектор Arco публикует переопределения для тёмной темы с тегом темы, которому задано arco-theme="dark". В сборке по умолчанию этот тег — body. Удаление атрибута восстанавливает обычные правила; класс с произвольным именем dark — не то же самое API. При добавлении предпросмотра тёмной темы согласуйте роли контейнера и текста. Автономный пример намеренно оставлен светлым, а нативный пример может использовать уже импортированную тему CSS. Не инвертируйте миниатюры отчётов или иллюстрации с помощью общего фильтра. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Справочник по коду Прочитать вспомогательную спецификацию ## Arco Design Справочник по дизайн-системе. Пакет, таблица стилей и реальные границы возможностей ### План отчёта не экспортирует данные отчёта Пакет React — @arco-design/web-react, а полная точка входа для CSS — dist/css/arco.css. В примере компоненты Transfer и Button импортируются из корневого модуля пакета, а состояние контролируется приложением; несуществующий API для построения отчётов не придумывается. Автономный пример воспроизводит поведение выбора с помощью нативных флажков и кнопок, поэтому работает без подключения к сети. Он проверяет логику взаимодействия и адаптивную композицию, но не подтверждает, что нативный пакет скомпилирован в проекте-потребителе. Для экспорта в рабочей среде потребуются серверная часть и проверки разрешений, которых нет в примере с неактивной строкой. Прочитать вспомогательную спецификацию ## Дизайн-система Arco Design Примеры компонентов ### Полноценный автономный интерактивный пример Сохраните весь документ как index.html и откройте его в браузере. Автономная HTML демонстрация поведения Arco Transfer и проверенных эталонных значений темы; отдельный нативный пример React приведён отдельно. ``` Arco report section transfer
Report studio

Choose report sections

Build an outline from the sections available to this workspace.

Available sections

Included in report

Select a section, then choose Include or Remove.

Prepared outline

No outline prepared yet.

HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported

``` Справочник по коду - Переместить ограниченный раздел отчёта нельзя. Выбранные строки и включённые разделы — это разные состояния, как и в описании нативного Transfer. ### Управляемое перемещение разделов отчёта Transfer управляет составом исходного и целевого списков, а состояние приложения хранит отдельно подготовленный план. Недоступная строка демонстрирует отключённый вариант, но не имитирует серверную проверку прав доступа. ``` // npm install @arco-design/web-react react react-dom import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {Transfer,Button} from '@arco-design/web-react'; import '@arco-design/web-react/dist/css/arco.css'; const data = [ {key:'overview',value:'Executive overview'}, {key:'traffic',value:'Acquisition channels'}, {key:'retention',value:'Retention cohorts'}, {key:'revenue',value:'Revenue breakdown'}, {key:'raw',value:'Raw event export (restricted)',disabled:true} ]; function ReportBuilder(){ const [target,setTarget]=useState(['overview']); const [selected,setSelected]=useState([]); const [snapshot,setSnapshot]=useState([]); const [status,setStatus]=useState('Choose sections for a local report.'); return

Report sections

item.value.toLowerCase().includes(query.toLowerCase())} onSelectChange={(left,right)=>setSelected([...left,...right])} onChange={(keys,direction,moved)=>{ setTarget(keys);setSelected([]); setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`); }} />

{status}

Prepared outline

{snapshot.length ?
    {snapshot.map(key=>
  1. {data.find(item=>item.key===key).value}
    2. )}
:

No outline prepared yet.

}
; } createRoot(document.getElementById('root')).render(); ``` Справочник по коду - Выбор с помощью флажков и включение в отчёт хранятся в разных массивах. - Пользовательский фильтр не учитывает регистр. - Данные примера созданы специально; аналитические данные не загружаются и не экспортируются. Нативная компиляция проверяется отдельно в рамках интеграции. ## Дизайн-система Arco Design Настройка агента ### Отправная точка для реализации Импортируйте полную таблицу стилей arco.css один раз и смонтируйте пример React в корневой элемент. Не смешивайте пакет React с импортами Arco Vue. ``` npm install @arco-design/web-react react react-dom ``` ### Запрос для вашего проекта ``` Используйте Arco React Transfer со стабильными ключами dataSource и отдельными управляемыми значениями targetKeys и selectedKeys. Добавьте фильтр без учёта регистра, явные действия «Включить» и «Удалить», а также снимок подготовленного плана. Сохраняйте синтаксис переменных Arco CSS и корректно обозначайте автономную демонстрацию. ``` ## Дизайн-система Arco Design Источники и область применения Независимый справочник OpenDesign. Оригинальные данные отчёта и локальный предпросмотр; отключённые строки не обеспечивают проверку прав доступа. - Пакет React Установка и точка входа таблицы стилей. - Глобальные токены Размеры, отступы и семантические соответствия. - Тема по умолчанию Типографика и анимация. - Палитра Проверенные эталонные цвета. - Переменные CSS Имена во время выполнения и селектор тёмной темы. - Transfer API Управляемое состояние и сигнатуры обратных вызовов. ## Дизайн-система Arco Design Связанные ресурсы ### Atlassian дизайн-система Создайте доску планирования задач с семантическими токенами Atlassian, шкалой отступов с шагом восемь пикселей, реальными API Button, Lozenge и Toggle и необходимой настройкой стилизации Compiled. Откройте задачу, отфильтруйте доску и переместите локальный рабочий элемент, не путая выбор со статусом. ### AWS Cloudscape Руководство по настройке Cloudscape с реальными токенами визуального обновления, плотностью адаптивных отступов, API управляемых форм и работающим двухэтапным мастером настройки ресурса. ### Backbase дизайн-система Создайте фирменный сценарий проверки банковской операции с модулями Backbase для Angular, семантическим экспортом темы и явно заданными состояниями проверки. Сравните веб-API с отдельно описанными размерами для нативных платформ. - [Справочник по реализации](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Источник](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Источник](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Источник](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Источник](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Источник](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Справочник по коду](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Справочник по коду](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Пакет React Установка и точка входа таблицы стилей.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Глобальные токены Размеры, отступы и семантические соответствия.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Тема по умолчанию Типографика и анимация.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Палитра Проверенные эталонные цвета.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Переменные CSS Имена во время выполнения и селектор тёмной темы.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer API Управляемое состояние и сигнатуры обратных вызовов.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)