Нативный рабочий лист для критического обзора Vuestic с проверенными по исходному коду светлой и тёмной темами, доступными подписями рейтинга, валидацией текстовой области, рассчитанным средним баллом и сохранением завершённой оценки.
Vuestic UI 1.10.3 с Vue 3; Material Icons подключены локально через @quasar/extras 2.1.0. · Справочник по реализации
02
Справочник по дизайну дизайн-системы Vuestic UI
Vuestic UI 1.10.3. Значения наборов считываются из установленного сервиса цвета, а переменные компонентов — из его CSS. В листе используется стандартный светлый набор, но значение --va-font-family намеренно переопределено на system-ui. Декоративные формы и окружающая их шкала — оригинальные решения.
Дизайн-система Vuestic UI: настраиваемая библиотека Vue с именованными цветовыми наборами
Настраиваемая библиотека Vue с именованными цветовыми наборами
Vuestic регистрирует общие сервисы с помощью createVuestic. В примере используются встроенные компоненты, импортированные из vuestic-ui, и стандартный светлый цветовой набор. Оценка, кнопки, индикатор прогресса и уведомление об успешном результате получают семантические имена цветов через этот же сервис.
Лист оценки — практический пример использования этих компонентов: он разделяет три вопроса для проверки, собирает подтверждающее наблюдение, рассчитывает среднее значение и блокирует сохранённый локальный результат. Цветные отметки критериев и двухколоночная композиция — оригинальный дизайн приложения, а не дополнительные компоненты Vuestic.
Дизайн-система Vuestic UI: отличайте наборы сервиса от переменных геометрии CSS
Отличайте наборы сервиса от переменных геометрии CSS
В проверенном светлом пресете заданы primary #154EC1, success #3D9209 и textPrimary #262824. В тёмном пресете используются другие значения primary, текста и поверхности, а не просто инвертируются цвета светлой страницы. В справочной таблице указаны оба пресета, а предварительный просмотр намеренно остаётся в светлом режиме.
Геометрия компонентов настраивается с помощью переменных CSS, таких как --va-button-border-radius и --va-form-element-border-radius; обе имеют значение 0.25rem в установленной таблице стилей. Цветовой пресет и переопределение переменной CSS решают разные задачи: используйте сервис для семантических ролей, а документированную переменную — для поддерживаемой геометрии компонентов.
Дизайн-система Vuestic UI: подключите необходимые значки и укажите переопределение шрифта
Подключите необходимые значки и укажите переопределение шрифта
По умолчанию Vuestic задаёт для --va-font-family значение Source Sans Pro. В примере эта переменная переопределена на system-ui, чтобы не полагаться незаметно на шрифт, который не был загружен. Таким образом, подписи компонентов и текст приложения используют явно указанный стек доступных шрифтов.
В значках рейтинга по умолчанию используются имена Material Icons, например star и star_outline. Таблица стилей локального шрифта импортируется из @quasar/extras и собирается вместе с файлами шрифта. Без этого ресурса вместо ожидаемых изображений звёзд могут отображаться буквальные названия значков. Шрифт значков отделён от переопределения семейства шрифтов приложения.
Дизайн-система Vuestic UI: используйте ноль для состояния «без оценки», а не для низкой оценки
Используйте ноль как состояние «нет ответа», а не как низкую оценку
Каждый VaRating привязан к числовому значению одного критерия. Максимум равен пяти, а параметр clearable включён, поэтому повторный выбор текущей оценки обнуляет значение этого критерия. Для нуля в интерфейсе отображается «Нет оценки», а не завершённая оценка ноль из пяти.
Среднее значение рассчитывается по числу положительных оценок. Это позволяет не учитывать критерии без ответа, пока рабочий лист заполняется. Для сохранения всё равно нужно оценить все три критерия, поэтому итоговое среднее всегда отражает полную оценку. При изменении оценки сразу обновляются индикатор завершения, полоса прогресса и сводка.
Сохраните пустой рабочий лист и проверьте сообщения об отсутствующих оценках и заметке.
Укажите для ясности оценку 4, для иерархии — 3, для обратной связи — 2; среднее значение станет равным 3.0.
Запишите конкретное наблюдение и сохраните его, затем нажмите «Начать заново», чтобы сбросить весь рабочий лист.
Дизайн-система Vuestic UI: для полезного наблюдения нужен содержательный текст и достаточно места
Полезное наблюдение требует содержательного текста и достаточного места
У VaTextarea есть видимая подпись, ограничение в четыреста символов и счётчик. После попытки сохранения приложение проверяет, что длина текста после удаления пробелов в начале и конце составляет не менее двадцати символов. Поэтому строка из пробелов не удовлетворяет требованию, несмотря на формальную длину.
В VaTextarea включён автоматический подбор высоты; минимальное число строк — четыре, максимальное — двенадцать. Это функциональная настройка, а не просто пример параметра: без autosize минимальное число строк не обеспечивало нужного расширения поля заметки. Исправленный вариант позволяет видеть наблюдение на узком экране, сохраняя обычную прокрутку для очень длинных заметок.
Дизайн-система Vuestic UI: рассчитывайте прогресс по завершённости, а не по среднему баллу
Рассчитывайте прогресс по завершённым пунктам, а не по среднему рейтингу
Полоса прогресса показывает, сколько критериев получили положительную оценку: число оценённых критериев делится на три и умножается на сто. Крупное число рядом показывает средний балл. Это разные показатели с разными знаменателями, их не следует смешивать: даже три низкие оценки могут означать стопроцентное завершение.
В предложении о завершении напрямую указаны числитель и знаменатель. Среднее значение подписано как «Среднее по оценённым критериям», а в сводке повторяется оценка каждого критерия. Эти подписи помогают понять расчёт и не принять необъяснённую полосу прогресса за общую оценку качества.
Дизайн-система Vuestic UI: заблокируйте завершённую локальную оценку до явного сброса
Блокируйте завершённую локальную оценку до явного сброса
При сохранении сначала устанавливается attempted, затем проверяются все оценки и заметка, и только после этого активируется состояние сохранения. Флаг saved переводит оценки и текстовое поле в режим только для чтения и отключает кнопку сохранения. В сообщении об успехе указано, что оценка сохранена локально и никуда не отправлена.
Обработчик кнопки «Начать заново» за один раз очищает все оценки, заметку, отображение проверки и состояние сохранения. Сброс намеренно выполняется явно: иначе изменение одного значения после сохранения сделало бы подтверждение неактуальным. Этот пример не предполагает наличия серверной части, учётной записи или получателя отзыва.
Дизайн-система Vuestic UI: укажите для каждого элемента оценки критерий и значение
Укажите для каждого элемента оценки критерий и значение
Для встроенных элементов VaRating в дереве доступности представлены кнопки. В aria-item-label входят название критерия и подстановочные значения value/max, благодаря чему получаются подписи, например «Оценка ясности — 4 из 5». Это позволяет не путать пятнадцать одинаковых элементов со звёздами, когда на странице показаны три оценки.
У текстового поля есть собственная видимая подпись, у полосы прогресса — подпись завершения, а сообщение о сохранении обозначено как статусная область. Декоративные маркеры критериев скрыты от вспомогательных технологий. При локальной проверке нажимали реальные подписанные кнопки оценки, проверяли валидацию и просматривали итоговый макет при ширине 280px, а не ограничивались проверкой наличия атрибутов ARIA.
Для каждого повторяющегося элемента оценки задайте отдельную подпись с названием критерия.
Визуально различайте состояния «без оценки» и «только для чтения».
После взаимодействия с реальными встроенными элементами проверьте числовую сводку.
Подключите плагин, компонент CSS и локальный ресурс значка
В точке входа регистрируется createVuestic, а vuestic-ui/css импортируется перед исходной таблицей стилей макета. В App.vue импортирован каждый используемый компонент, поэтому пример не зависит от недокументированной настройки автоматического импорта. Общее переопределение шрифта применяется после библиотеки CSS.
Команда установки пакета включает @quasar/extras только как источник локального шрифта Material Icons; он не регистрирует Quasar и не добавляет его компоненты в рабочий лист. Полные SFC и таблицу стилей выше можно добавить в приведённую ниже настройку Vite для Vue. В отдельном предварительном просмотре необходимые ресурсы встроены, удалённый шрифт не загружается.
Полный встроенный рабочий лист для критической оценки
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar и VaAlert связаны с одной моделью оценки.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Для Material Icons сохраняется отдельное семейство шрифта.
Минимальная высота документа не задаётся.
04
Дизайн-система Vuestic UI: настройка агента
Отправная точка для реализации
Проверено на Vuestic UI 1.10.3; локальные Material Icons подключены из @quasar/extras 2.1.0. Приведены оба полных примера исходного кода; внешний сервис шрифтов не требуется.
javascript
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Используйте Vuestic UI 1.10.3, чтобы воспроизвести рабочий лист для критической оценки с тремя встроенными критериями VaRating, VaTextarea, индикатором прогресса, статусом и кнопками сохранения и сброса. Рассчитывайте среднее только по оценённым критериям; для сохранения требуйте оценок по всем трём критериям и заметку длиной не менее двадцати символов после удаления пробелов по краям. Сохраните автоматическое изменение высоты текстового поля, чтобы весь отзыв оставался видимым, и обеспечьте согласованность режима только для чтения после сохранения и поведения сброса. Подключите createVuestic, встроенный CSS и локальный шрифт значков. Это локальная запись критической оценки, а не сервис пакетной проверки.
05
Дизайн-система Vuestic UI: источники и область применения
Vuestic UI 1.10.3 со светлым цветовым пресетом по умолчанию и явным переопределением системного шрифта. Исходные вопросы и иллюстрации для критической оценки. Сохранённое состояние хранится локально; отправка на внешнюю проверку не выполняется, после перезагрузки данные не сохраняются.
