Встроенный редактор каталога Oruga с поиском и удалением тематических тегов, ограничениями словаря, реальными токенами необязательной темы и динамической карточкой, которая отражает выбранные метки.
@oruga-ui/oruga-next 0.14.4 с @oruga-ui/theme-oruga 0.10.0 и локальными иконками MDI. · Справочник по реализации
02
Справочник по дизайну для дизайн-системы Oruga UI
Пакет Oruga для Vue 3 версии 0.14.4 с @oruga-ui/theme-oruga 0.10.0. Приведённые ниже значения относятся к этой необязательной теме по умолчанию, а не к неизменяемому ядру без оформления. Иконки MDI 7.4.47 подключаются локально. Композиция каталога и изображения папок созданы специально для этого примера.
Отделите поведение компонентов Oruga от необязательной темы в дизайн-системе Oruga UI
Отделите поведение компонентов Oruga от необязательной темы
Oruga предоставляет компоненты Vue, не требуя определённого фреймворка CSS. В этом примере пакет для Vue 3 сочетается с отдельной темой Oruga по умолчанию. Зелёные выбранные метки и поля с обводкой задаются этой темой, а поиск, выбор и удаление реализованы как нативное поведение компонентов.
Это разграничение полезно при оценке библиотеки. Команда может сохранить API компонентов и заменить настройки классов или выбрать другую поддерживаемую тему. Поэтому в справочной таблице указаны название и версия пакета темы, а зелёный основной цвет не представлен как универсальное требование для всех приложений Oruga.
Используйте настоящие переменные темы по умолчанию в дизайн-системе Oruga UI
Используйте настоящие переменные темы по умолчанию
Установленная необязательная тема задаёт --oruga-primary как #445e00, а --oruga-primary-invert — как white. Для цвета ошибки используется #b60000, а границы элементов управления имеют цвет #dbdbdb. Свойство варианта компонента выбирает соответствующую семантическую группу, поэтому для каждого поля или метки не нужно задавать отдельное правило CSS.
Эта же тема задаёт стандартный радиус в четыре пикселя, высоту элемента управления 2.25em и формулы отступов с вычитанием границы толщиной в один пиксель. Поскольку эти значения зависят от размера текста элемента управления, изменение масштаба шрифта влияет на геометрию. Промежуток темы в половину em описывает взаимосвязь компонентов, а не наличие полной шкалы отступов для макета страницы.
Самостоятельно задайте компоновку, которую Oruga намеренно не навязывает, в дизайн-системе Oruga UI
Самостоятельно задайте компоновку, которую Oruga намеренно не навязывает
В каталоге используется гибкая колонка редактора и колонка карточки шириной 330px; ниже 760px они располагаются друг под другом. Для заголовка страницы выбран системный шрифт без засечек, а для заголовка карточки — Georgia, чтобы придать записи редакционный характер. Оба решения — авторские; внешние файлы шрифтов не нужны.
Oruga не предписывает сетку или утилитарный фреймворк. Поэтому в полной таблице стилей явно заданы внутренние отступы панелей, отступы на узких экранах и правила переноса. Счётчик меток не разрывает числитель и знаменатель, а заголовок карточки переносится при большой длине названия заметки, не смещая встроенную страницу по горизонтали.
Храните выбранные значения отдельно от поискового запроса в дизайн-системе Oruga UI
Храните выбранные значения отдельно от поискового запроса
OTaginput связывает массив выбранных тем через v-model. Внутренний текст автодополнения фильтрует названия доступных вариантов, не заменяя этот массив. Словарь включает шесть оригинальных тем с конкретными определениями, а на карточке отображаются определения только выбранных тем.
По умолчанию поиск не учитывает регистр. В локальном тесте ввели Color и дождались завершения фильтрации, прежде чем выбрать найденный вариант. Немедленная проверка во время задержки обработки ввода ошибочно показала бы, что фильтрация не работает. После выбора поисковый запрос очищается, а ранее выбранные метки сохраняются.
Найдите Color и выберите соответствующий вариант.
Добавьте Forms, чтобы вместе с Navigation выбрать три темы.
Удалите метку, убедитесь, что карточка обновилась, и выберите замену перед сохранением.
Независимо задавайте словарь, дубликаты и количество элементов в дизайн-системе Oruga UI
Независимо задавайте словарь, дубликаты и количество элементов
allow-new=false запрещает превращать произвольный введённый текст в метку. allow-duplicates=false не позволяет добавить одну и ту же существующую метку дважды. maxitems=3 ограничивает общее количество выбранных элементов и показывает счётчик. Каждая настройка отвечает за отдельный аспект контролируемого словаря.
При попытке сохранить приложение всё равно проверяет, выбрана ли хотя бы одна тема. Ограничение максимального количества не означает наличия минимального требования. Приложение также проверяет, что длина заголовка после удаления пробелов по краям составляет не менее пяти значимых символов, а нативный атрибут maxlength ограничивает его длину восемьюдесятью символами.
Используйте OField для подписей и конкретных сообщений валидации в дизайн-системе Oruga UI
Используйте OField для подписей и конкретных сообщений валидации
OField отображает заголовок заметки и метки тем, а также сообщения к ним. После неудачной попытки сохранить соответствующее поле получает вариант danger и конкретное сообщение о том, что нужно исправить. Подсказка для тем заранее объясняет допустимый диапазон и ограничение по словарю.
Встроенный список раскрывающихся вариантов для ввода тегов использует шаблон combobox/listbox. В этой версии роль combobox назначена обёртке, а поле для ввода текста находится внутри неё. Поэтому тест QA заполняет именно поле Search topics, а не предполагает, что элемент с ролью combobox сам является полем ввода.
Дизайн-система Oruga UI: стандартному набору иконок всё ещё нужен файл шрифта
Для набора иконок по умолчанию всё равно нужен файл шрифта
Для управления удалением тегов используется набор иконок MDI по умолчанию в Oruga. Подключение темы компонента не загружает этот шрифт автоматически, поэтому полная конфигурация включает @mdi/font. В автономном предпросмотре используется локальный файл WOFF2 и необходимые правила для иконок, благодаря чему не требуется загрузка шрифта из удалённого источника.
Для удаления используется настоящая кнопка с доступной меткой Remove topic. Декоративная иллюстрация папки не относится к этим элементам управления, поэтому она скрыта от вспомогательных технологий. Это не позволяет принять декоративный значок за интерактивный элемент.
Дизайн-система Oruga UI: сбрасывайте сохранённый снимок при изменении исходных данных
Сбрасывайте сохранённый снимок при изменении исходных данных
Действие Save сохраняет предложение с обрезанным заголовком и количеством выбранных тем. Наблюдатель отслеживает заголовок и массив тем с глубокой проверкой; поэтому удаление элемента сбрасывает подтверждение так же, как и изменение заголовка. Кнопка Save отключена только тогда, когда текущий снимок сохранён.
Команда Clear note сбрасывает заголовок, все выбранные темы, состояние проверки и сохранённый статус. На карточке снова отображаются Untitled research note и No topics selected. Пользователь может пройти весь цикл от пустой заметки до редактирования и сохранения без скрытых за кнопкой операций с сервером, загрузкой или публикацией.
Сохраняйте модель выбранного массива при изменении поискового запроса.
Сбрасывайте подтверждение сохранения при изменениях вложенного массива.
Описывайте результат как локальное состояние, а не как публикацию.
Дизайн-система Oruga UI: подключайте компоненты явно с актуальной моделью регистрации Oruga
Импортируйте компоненты явно, используя актуальный способ регистрации Oruga
Проверенная конфигурация 0.14.4 создаёт экземпляр Oruga и устанавливает его в приложении Vue. В App.vue компоненты OField, OInput, OTaginput, OTag и OButton импортируются явно. Это соответствует актуальной модели регистрации; использование старых примеров, в которых предполагалась глобальная регистрация всех компонентов, может привести к неполной конфигурации приложения.
В README темы указано, что стандартная тема использует существующие имена классов Oruga и требует подключения таблицы стилей, но не дополнительного объекта конфигурации темы. Точка входа последовательно импортирует эту таблицу стилей, ресурс MDI и исходную компоновку. Все необходимые части есть в приведённых выше полных примерах исходного кода и ниже, в корне Vite.
OTaginput, OField, OInput, OTag и OButton связывают ограниченный словарь с динамически обновляемой карточкой каталога.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
Oruga не предоставляет обязательную систему сеток; эта компоновка явно задана в приложении CSS.
Текст счётчика остаётся в одну строку даже при узкой ширине.
04
Oruga UI Настройка агента дизайн-системы
Отправная точка для реализации
Проверенные версии: Oruga 0.14.4, необязательная стандартная тема 0.10.0 и MDI 7.4.47. Компоненты импортируются явно; стандартной теме не требуется дополнительная конфигурация темы JavaScript.
javascript
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/[email protected] @oruga-ui/[email protected] @mdi/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Начните с каталога исследовательских заметок на Oruga 0.14.4 и темы 0.10.0. Сохраните управляемый выбор OTaginput из словаря из шести тем, поиск без учёта регистра, запрет на добавление новых и повторяющихся тегов и ограничение в три тега. Свяжите определения тем и проверку заголовка с сохранённым снимком; при изменениях сбрасывайте подтверждение сохранения. Включите настройку createOruga, темы CSS и локального ресурса MDI. Сброс выполняйте до пустого черновика; не придумывайте данные для сравнения продуктов или обновление удалённого каталога.
05
Дизайн-система Oruga UI: источники и область применения
Oruga 0.14.4 и необязательная стандартная тема 0.10.0. Оригинальный словарь и иллюстрация каталога. Сохранение изменяет только локальное состояние страницы, без загрузки, публикации и сохранения после перезагрузки.
