Реализация PrimeVue с фиксированной версией из экосистемы Prime UI: дерево документов в теме Aura с реальными ссылками на пресеты, управляемым раскрытием, фильтрацией, выбором и локальным закреплением.
PrimeVue 4.5.5 с Vue 3 и @primeuix/themes 1.2.5 Aura. Это конкретная реализация для Vue, а не кросс-фреймворковый пакет. · Справочник по реализации
02
Справочник по дизайну дизайн-системы Prime UI
Этот ресурс Prime UI реализует PrimeVue 4.5.5 с @primeuix/themes 1.2.5 Aura, а не заявляет о существовании единой взаимозаменяемой API для PrimeVue, PrimeReact и PrimeNG. Значения проверены в установленном пресете. На странице задан размер корневого шрифта 16px; размеры в rem рассчитаны исходя из этого значения.
Дизайн-система Prime UI — экосистема, а не один импорт
Prime UI — экосистема, а не один импорт
Экосистема пользовательских интерфейсов PrimeTek включает реализации для разных фреймворков. Здесь выбрана конкретная конфигурация: PrimeVue 4.5.5 с Vue 3 и пресетом Aura из @primeuix/themes 1.2.5. Полный файл входа, импорты и пример компонента относятся к этой настройке Vue. Для проекта на React или Angular нужен соответствующий пакет и API — копировать эти теги Vue без изменений не следует.
Здесь важно зафиксировать версию. В установленном пакете 4.5.5 используется лицензия MIT, и проверенный локальный пример работает без лицензионного ключа. При тестировании более новой среды выполнения 5.0.2 появилось сообщение об ошибке лицензии PrimeUI, поэтому в этом примере намеренно не приводится команда для безусловной установки последней версии и не подразумеваются одинаковые условия лицензирования для всех выпусков.
В дизайн-системе Prime UI примитивные, семантические токены и токены компонентов образуют цепочку
Примитивные, семантические токены и токены компонентов образуют цепочку
В Aura исходные цветовые примитивы отделены от семантических ролей и значений компонентов. В стандартной основной цветовой шкале используются изумрудные примитивы. В светлой теме primary.color ссылается на primary.500, hoverColor — на primary.600, а activeColor — на primary.700. Для ролей выделения используются более светлые поверхности основного цвета и более тёмные цвета переднего плана.
Затем Tree связывает фон и текст выбранного элемента с ролями выделения, а не задаёт второй, не связанный с ними оттенок зелёного. В спецификации сохранены ссылки в фигурных скобках, поскольку они показывают, как изменения распространяются по теме. Если заменить каждый псевдоним отдельным значением hex, эта полезная связь станет незаметной.
В дизайн-системе Prime UI читайте значения из соответствующего пресета
Читайте значения из соответствующего пресета
В зафиксированном пресете Aura внутренний отступ корневого элемента Tree и отступ уровней вложенности составляют по одному rem, внутренние отступы узла — 0.25rem 0.5rem, а размер кнопки-переключателя — 1.75rem. В примере для html задан размер шрифта шестнадцать пикселей, поэтому эти размеры однозначны. В разных версиях пресета или при другом размере корневого шрифта плотность может отличаться, даже если разметка компонента выглядит одинаково.
Примитивы скругления границ охватывают значения от нуля до двух, четырёх, шести, восьми и двенадцати пикселей. Общие внутренние отступы поля составляют 0.75rem по горизонтали и 0.5rem по вертикали. Заголовок размером тридцать четыре пикселя, системный шрифт и промежуток между столбцами в двадцать четыре пикселя — это исходные настройки макета страницы, не относящиеся к теме встроенного компонента.
Дизайн-система Prime UI: ключи узлов обеспечивают стабильное раскрытие и выделение
Ключи узлов обеспечивают стабильное раскрытие и выделение
Дерево содержит одну задачу, три папки и шесть документов-листьев. У каждого узла есть стабильный ключ и метка. Для узлов-папок задано selectable:false: они формируют иерархию, но не притворяются документами для чтения. Модель expandedKeys управляет открытыми папками; команды Expand и Collapse намеренно заменяют эту карту.
Для одиночного выбора используются selectionKeys и обработчик node-select. Панель сведений обновляется только в том случае, если ключ найден в карте документов. Изменение видимой метки не требует менять идентификатор; сворачивание папки не удаляет выбранный документ и не снимает с него отметку закрепления.
В Tree включён встроенный фильтр с режимом filterMode lenient и видимой подсказкой «Найти документ». Поиск по слову maps сужает отображаемую иерархию до совпавшего документа и его предков. Читатель по-прежнему понимает, к какой части структуры относится результат, вместо того чтобы получить несвязанный плоский список подсказок.
При очистке фильтра восстанавливается иерархия. Фильтрация не изменяет исходные узлы и не удаляет закреплённые документы. Панель сведений сохраняет последний явно выбранный лист, поэтому содержимое не меняется неожиданно при каждом нажатии клавиши. Для большой коллекции может понадобиться ленивая загрузка данных, но в этом полном примере используются шесть локальных записей и не заявляется о поддержке поиска на сервере.
Найдите «maps» и проверьте, что контекст задачи и папки сохраняется.
Выберите Three regional maps, чтобы обновить панель документа.
Очистите фильтр и убедитесь, что выбранный документ по-прежнему доступен в иерархии.
В дизайн-системе Prime UI выбранному документу нужно отдельное полезное содержимое
Выбранному документу нужно отдельное полезное содержимое
У каждого документа есть тип, владелец, статус, описание, список для проверки и особая заметка. Для эссе важно проверить последовательность и подписи; для картографического справочника — согласованность ориентации и независимость масштаба; для списка проверки проб — читаемость и обрезку. Содержимое меняется в зависимости от выбора, а не повторяет один и тот же абзац под шестью заголовками.
Теги статуса служат описательными метаданными образца. Они не запускают внешний процесс публикации. Контурная иллюстрация — оригинальная декоративная геометрия; там, где это уместно, она обозначена как таковая. Это не географическая карта, и воспринимать её как карту не следует.
Prime UI Закреплённое состояние в дизайн-системе не зависит от модели дерева
Закрепление не зависит от модели дерева
Кнопка «Закрепить этот документ» добавляет ключ текущего документа в локальный массив. После добавления кнопка меняется на «Закреплено» и становится неактивной, чтобы исключить дублирование. Удаление закреплённой строки удаляет только этот ключ и не затрагивает выбор в дереве. Количество закреплённых документов вычисляется по массиву.
Это разделение важно, потому что выбор, раскрытие и сохранённые ссылки решают разные задачи. Пользователь может свернуть все папки, оставив выбранное эссе открытым, или перейти к другой части выпуска с помощью фильтра, не теряя закреплённую ссылку. Ни одно из этих действий не означает, что удалённый документ был отредактирован.
Prime UI Сохраняйте встроенную модель клавиатурной навигации дерева в дизайн-системе
Сохраняйте встроенную модель клавиатурной навигации дерева
Встроенный Tree передаёт иерархию с помощью ролей tree и treeitem, атрибутов выбора и раскрытия, а также связей между вложенными уровнями. Модель клавиатурной навигации использует клавиши со стрелками для перемещения по видимым узлам и раскрытия или сворачивания ветвей; Enter или Space выбирает узел в фокусе. На странице для коллекции задан понятный aria-label.
В панели сведений и списке закреплённых документов используются обычные заголовки, списки и кнопки с понятными названиями. На мобильных устройствах навигатор предшествует документу в порядке чтения. При исходной контрольной ширине 760px макет перестраивается в одну колонку, не обрезая дерево и не скрывая инструкции к документу; строка состояния сообщает о текущем выборе.
Используйте стабильные ключи, если меняется порядок узлов в дереве.
Отключайте выбор папок, если с ними не связаны подробные сведения.
Указывайте в названиях кнопок «Удалить» конкретное имя документа, а не повторяйте одну неоднозначную подпись.
Дизайн-система Prime UI Регистрируйте тему один раз в корневом компоненте Vue
Зарегистрируйте тему один раз в корне Vue-приложения
В файле входа импортируются PrimeVue из primevue/config, Aura из @primeuix/themes/aura и приложение App.vue целиком. Плагин регистрируется с параметром theme.preset, установленным в Aura. В этом неизменяемом светлом примере darkModeSelector равен false; для переключения темы в production-среде используйте параметры, поддерживаемые соответствующим выпуском, а не смешивайте документацию разных основных версий.
Стили компонентов PrimeVue генерируются из пресета. В предоставленном style.css определены только оригинальные стили макета страницы и иллюстрации. Импорт устаревшего primevue/resources/theme.css не используется. В проверенной конфигурации был выбран конечный узел дерева, он был закреплён, иерархия отфильтрована, а интерфейс отображён при ширине 390px без уведомления о недействительной лицензии.
Стабильные ключи узлов, управляемые объекты состояния раскрытия и выбора, обработчики фильтрации и выбора узла.
vue
<script setup>
import {ref,computed} from 'vue';import Tree from 'primevue/tree';import Button from 'primevue/button';import Tag from 'primevue/tag';
const nodes=[{key:'issue',label:'Issue 04 · Fieldwork',selectable:false,children:[{key:'essays',label:'Essays',selectable:false,children:[{key:'ridge',label:'The ridge path'},{key:'river',label:'A river after rain'}]},{key:'visuals',label:'Visual material',selectable:false,children:[{key:'maps',label:'Three regional maps'},{key:'captions',label:'Caption reference sheet'}]},{key:'production',label:'Production',selectable:false,children:[{key:'proof',label:'Print proof checklist'},{key:'credits',label:'Credits and permissions'}]}]}];
const documents={ridge:{type:'Essay',owner:'Alex Morgan',status:'Editing',title:'The ridge path',intro:'A field essay about following the contour rather than the shortest route.',items:['Opening: the first view above the tree line','Middle: how a contour changes the pace of walking','Close: the landmarks remembered on the return'],note:'Review the transition between the weather observation and the first-person account.'},river:{type:'Essay',owner:'Jules Chen',status:'Review',title:'A river after rain',intro:'An observational essay that follows sediment, sound and changing water levels.',items:['Keep the time sequence explicit','Pair each field image with an observation','Check the final geographic names'],note:'Compare the image captions with the text before locking the layout.'},maps:{type:'Visual reference',owner:'Sam Rivera',status:'Review',title:'Three regional maps',intro:'A consistent reference treatment for ridge, river and open plain.',items:['Same north orientation','Shared legend and label size','Scale shown independently on each map'],note:'The miniature map below is original decorative geometry, not a geographic claim.'},captions:{type:'Reference',owner:'Maya Patel',status:'Editing',title:'Caption reference sheet',intro:'One place to keep subject, location, credit and contextual description.',items:['Subject and date','Location at an appropriate level of precision','Author or source credit'],note:'Do not use the visible caption as a substitute for a useful image alt description.'},proof:{type:'Checklist',owner:'Alex Morgan',status:'Ready',title:'Print proof checklist',intro:'Review the physical proof at actual scale before choosing the final stock.',items:['Body text and small labels remain legible','Images preserve the intended tonal range','Trim and page sequence match the layout'],note:'This is a sample editorial workflow, not a print vendor specification.'},credits:{type:'Reference',owner:'Maya Patel',status:'Review',title:'Credits and permissions',intro:'Keep attribution close to each asset record so it survives layout changes.',items:['Creator name and source','Allowed uses recorded separately','Credit wording copied accurately'],note:'This sample does not provide legal permission for any external image.'}};
const expanded=ref({issue:true,essays:true,visuals:true,production:true}),selection=ref({'ridge':true}),current=ref('ridge'),saved=ref([]);const doc=computed(()=>documents[current.value]);function select(node){if(documents[node.key])current.value=node.key;}function pin(){if(!saved.value.includes(current.value))saved.value.push(current.value);}function expandAll(){expanded.value={issue:true,essays:true,visuals:true,production:true};}
</script>
<template><main class="editorial-library"><header><div><p class="eyebrow">PRIME UI · PRIMEVUE IMPLEMENTATION</p><h1>Find the thread of an issue.</h1><p class="intro">A native tree navigator for an editorial collection, using the Aura theme.</p></div><Tag value="Local specimen" severity="secondary" /></header><div class="library-layout"><aside class="library-nav"><div class="nav-heading"><h2>Issue contents</h2><div><Button label="Expand" text size="small" @click="expandAll"/><Button label="Collapse" text size="small" @click="expanded={}"/></div></div><Tree :value="nodes" v-model:expandedKeys="expanded" v-model:selectionKeys="selection" selectionMode="single" :filter="true" filterMode="lenient" filterPlaceholder="Find a document" aria-label="Editorial document tree" @node-select="select" /><section class="pinned"><h2>Pinned documents <span>{{saved.length}}</span></h2><ul v-if="saved.length"><li v-for="key in saved" :key="key"><span>{{documents[key].title}}</span><Button label="Remove" text size="small" :aria-label="`Remove ${documents[key].title}`" @click="saved=saved.filter(x=>x!==key)"/></li></ul><p v-else>No documents pinned yet.</p></section></aside><article class="document"><div class="document-top"><span>{{doc.type}}</span><Tag :value="doc.status" :severity="doc.status==='Ready'?'success':doc.status==='Review'?'info':'warn'"/></div><h2>{{doc.title}}</h2><p class="owner">{{doc.owner}} · ISSUE 04</p><div class="map-art" aria-hidden="true"><i></i><i></i><i></i><span>FIELD NOTES / 04</span></div><p class="intro">{{doc.intro}}</p><h3>What to inspect</h3><ol><li v-for="item in doc.items" :key="item">{{item}}</li></ol><aside class="document-note">{{doc.note}}</aside><Button :label="saved.includes(current)?'Pinned':'Pin this document'" :disabled="saved.includes(current)" @click="pin"/><p class="local-note">Sample records only. Pinning changes this page’s local state.</p></article></div><p class="selection-status" role="status">Selected document: {{doc.title}}</p></main></template>
Контурная иллюстрация — оригинальная декоративная геометрия, а не настоящая карта.
Размер корневого шрифта явно задан как 16px, чтобы размеры в rem воспроизводились точно.
04
Дизайн-система Prime UI Настройка агента
Отправная точка для реализации
Проверено с PrimeVue 4.5.5 и @primeuix/themes 1.2.5. Установленный пакет PrimeVue 4 распространяется по лицензии MIT. Не предполагайте, что для другой основной версии подойдут те же настройки или лицензионные условия.
javascript
// Create the project first:
// npm create vite@latest prime-ui-specimen -- --template vue
// cd prime-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @primeuix/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import './style.css';
createApp(App).use(PrimeVue, {
theme: {preset: Aura, options: {darkModeSelector: false}}
}).mount('#app');
// index.html contains <div id="app"></div>.
// This example is pinned to 4.5.5, not the newer 5.x runtime.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Создайте проект на основе предоставленной библиотеки редакционных документов PrimeVue 4.5.5 и соответствующего пресета Aura из @primeuix/themes 1.2.5. Сохраните встроенные раскрытие дерева, фильтрацию и выбор с использованием стабильных ключей узлов; сведения о выбранном документе храните отдельно от списка закреплённых документов. Закрепляйте и открепляйте существующие документы, не превращая узлы категорий в документы и не создавая дубликаты. Сохраните полную настройку провайдера и исходный адаптивный CSS. Это проверенный пример для четвёртой версии; не заменяйте его незаметно средой выполнения более новой основной версии и не превращайте в процесс закупок.
05
Prime UI Источники и область применения дизайн-системы
Prime UI экосистемы, реализованная с помощью PrimeVue 4.5.5 и Aura 1.2.5. На этой странице не утверждается, что API или лицензионные условия одинаковы для разных пакетов фреймворка и новых основных версий. Все записи и закрепления хранятся локально.
