Un’implementazione PrimeVue con versione vincolata dell’ecosistema Prime UI: un albero di documenti con tema Aura, riferimenti reali al preset, espansione controllata, filtri, selezione e aggiunta locale ai preferiti.
PrimeVue 4.5.5 con Vue 3 e @primeuix/themes 1.2.5 Aura. È un’implementazione specifica per Vue, non un pacchetto multipiattaforma. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design Prime UI
Questa risorsa Prime UI implementa PrimeVue 4.5.5 con @primeuix/themes 1.2.5 Aura, senza sostenere che esista un unico API intercambiabile tra PrimeVue, PrimeReact e PrimeNG. I valori sono stati verificati nel preset installato. La pagina imposta la radice a 16px; le dimensioni in rem sono calcolate in base a questa scelta esplicita.
Il sistema di progettazione sistema di design Prime UI è un ecosistema, non un singolo import
Prime UI è un ecosistema, non un singolo import
L’ecosistema UI di PrimeTek comprende implementazioni per framework diversi. Questa pagina ne sceglie una specifica: PrimeVue 4.5.5 con Vue 3 e il preset Aura di @primeuix/themes 1.2.5. Il file di ingresso completo, gli import e l’esempio del componente appartengono a questa configurazione Vue. Un progetto React o Angular richiede il pacchetto e il relativo API, invece di copiare senza modifiche questi tag Vue.
In questo caso, fissare la versione è importante. Il pacchetto 4.5.5 installato è distribuito con licenza MIT e l’esempio locale verificato funziona senza una chiave di licenza. Un test del runtime più recente, la versione 5.0.2, ha mostrato un errore di licenza PrimeUI; per questo l’esempio evita deliberatamente di proporre un comando generico per installare l’ultima versione o di suggerire che le condizioni di autorizzazione siano identiche tra le release.
I token primitivi, semantici e dei componenti formano una catena nel sistema di progettazione sistema di design Prime UI
I token primitivi, semantici e dei componenti formano una catena
Aura separa i primitivi cromatici grezzi dai ruoli semantici e dai valori dei componenti. La scala primaria predefinita fa riferimento ai primitivi smeraldo. In modalità chiara, primary.color fa riferimento a primary.500, hoverColor a primary.600 e activeColor a primary.700. I ruoli di evidenziazione usano superfici primarie più chiare e colori di primo piano più scuri per la selezione.
L’albero associa quindi lo sfondo e il testo selezionati ai ruoli di evidenziazione, invece di applicare un secondo verde senza relazione. La specifica mantiene intatti i riferimenti tra parentesi graffe, perché un riferimento mostra come il tema propaghi le modifiche. Sostituire ogni alias con un valore esadecimale indipendente nasconderebbe questa utile dipendenza.
Leggi i valori dal preset corrispondente del sistema di progettazione sistema di design Prime UI
Leggi i valori dal preset corrispondente
Nel preset Aura fissato, il padding e l’indentazione della radice dell’albero sono entrambi di un rem, il padding dei nodi è 0.25rem 0.5rem e il pulsante di attivazione è di 1.75rem. L’esempio imposta html a sedici pixel, rendendo esplicite queste dimensioni. Release diverse del preset o dimensioni diverse della radice possono produrre densità differenti anche quando il markup del componente è simile.
I valori primitivi del raggio del bordo vanno da zero a due, quattro, sei, otto e dodici pixel. Il padding condiviso dei campi è di 0.75rem in orizzontale e 0.5rem in verticale. Il titolo da trentaquattro pixel, il carattere di sistema e la distanza di ventiquattro pixel tra le colonne sono scelte originali di layout, esterne al tema del componente nativo.
Le chiavi dei nodi rendono stabili l’espansione e la selezione nel sistema di progettazione sistema di design Prime UI
Le chiavi dei nodi rendono stabili l’espansione e la selezione
L’albero modella un problema, tre cartelle e sei documenti foglia. Ogni nodo ha una chiave e un’etichetta stabili. I nodi delle cartelle hanno selectable:false, così organizzano la gerarchia senza essere presentati come documenti da leggere. Il modello expandedKeys controlla le cartelle aperte; Espandi e Comprimi sostituiscono intenzionalmente questa mappa.
La selezione singola usa selectionKeys e un gestore node-select. Solo una chiave presente nella mappa dei record dei documenti aggiorna il pannello dei dettagli. Rinominare un’etichetta visibile non richiede di cambiarne l’identità; inoltre, comprimere una cartella non elimina il documento attualmente selezionato né il suo stato fissato.
Il filtro nativo mantiene il contesto di una corrispondenza nel sistema di progettazione sistema di design Prime UI
Il filtro nativo mantiene il contesto della corrispondenza
L’albero attiva il filtro integrato con filterMode lenient e mostra il testo segnaposto Trova un documento. Cercando maps, la gerarchia visualizzata si restringe al documento corrispondente e ai suoi antenati. Il lettore può comunque capire a quale sezione appartiene il risultato, invece di ricevere un elenco piatto di suggerimenti senza relazione.
Cancellando il filtro, la gerarchia viene ripristinata. Il filtro non modifica i nodi sorgente né rimuove i documenti fissati. Il pannello dei dettagli mantiene l’ultima foglia selezionata esplicitamente, evitando cambi di contenuto inattesi a ogni pressione di tasto. Una raccolta più ampia potrebbe richiedere il caricamento lazy dei dati, ma questo esempio completo usa sei record locali e non dichiara di supportare la ricerca lato server.
Cerca “maps” e osserva il contesto del problema e della cartella che rimane visibile.
Seleziona Tre mappe regionali per aggiornare il pannello del documento.
Cancella il filtro e verifica che il documento selezionato sia ancora disponibile nella gerarchia.
Un documento selezionato deve offrire contenuti distinti e utili nel sistema di progettazione sistema di design Prime UI
Un documento selezionato deve offrire contenuti distinti e utili
Ogni documento ha un tipo, un responsabile, uno stato, un’introduzione, un elenco di verifiche e una nota specifica. Un saggio richiede controlli sulla sequenza e sulle didascalie; una carta di riferimento richiede orientamento coerente e scala indipendente; una checklist per la prova di stampa pone domande sulla leggibilità e sul taglio. I contenuti cambiano in base alla selezione, invece di riutilizzare lo stesso paragrafo sotto sei titoli.
I tag di stato restano metadati descrittivi di esempio. Non attivano flussi di pubblicazione esterni. Il grafico delle curve di livello è una geometria decorativa originale, indicata come tale dove pertinente; non è una carta geografica e non va interpretato come tale.
Sistema di design Prime UI Sistema di progettazione: lo stato dei preferiti è indipendente dal modello ad albero
Lo stato fissato è indipendente dal modello ad albero
Aggiungi questo documento ai preferiti inserisce la chiave del documento corrente in un array locale. Una volta aggiunto, il pulsante diventa Preferito e viene disabilitato, impedendo duplicati. Rimuovere una riga dai preferiti elimina solo quella chiave e lascia invariata la selezione nell’albero. Il conteggio dei preferiti è ricavato dall’array.
Questa separazione è importante perché selezione, espansione e riferimenti salvati rispondono a esigenze diverse. È possibile comprimere tutte le cartelle mantenendo aperto il saggio selezionato, oppure filtrare un’altra parte del fascicolo senza perdere un riferimento salvato. Nessuna di queste azioni implica che un documento remoto sia stato modificato.
Sistema di design Prime UI Sistema di progettazione: mantieni il modello di tastiera nativo dell’albero
Mantieni il modello di tastiera nativo dell’albero
Il componente Tree nativo espone la gerarchia tramite i ruoli tree e treeitem, gli attributi di selezione ed espansione e la relazione tra i livelli annidati. Il modello di tastiera usa i tasti freccia per spostarsi tra i nodi visibili e per espandere o comprimere i rami; Invio o Spazio selezionano il nodo attivo. La pagina fornisce un aria-label chiaro per la raccolta.
Il pannello dei dettagli e l’elenco dei preferiti usano normali intestazioni, elenchi e pulsanti con nomi chiari. Su dispositivi mobili, il navigatore precede il documento nell’ordine di lettura. Il layout si dispone in colonna al breakpoint originale di 760px, senza tagliare l’albero né rimuovere le istruzioni del documento; una riga di stato indica la selezione corrente.
Usa chiavi stabili quando cambia l’ordine visibile dell’albero.
Imposta le cartelle come non selezionabili se non hanno contenuti di dettaglio associati.
Assegna ai pulsanti Rimuovi il nome specifico del documento, evitando un’unica etichetta ambigua ripetuta.
Sistema di design Prime UI Sistema di progettazione: registra il tema una sola volta alla radice di Vue
Registra il tema una sola volta nella radice Vue
Il file di ingresso importa PrimeVue da primevue/config, Aura da @primeuix/themes/aura e l’intero App.vue. Registra il plugin con theme.preset impostato su Aura. In questo esempio fisso con tema chiaro, darkModeSelector è false; un selettore di tema per la produzione va configurato tramite le opzioni supportate dalla versione corrispondente, senza mescolare la documentazione di una versione principale più recente.
I componenti stilizzati di PrimeVue generano gli stili necessari a partire dal preset. Il file style.css fornito definisce solo il layout originale della pagina e l’illustrazione. Non viene importato il file legacy primevue/resources/theme.css. La configurazione verificata ha selezionato una foglia dell’albero, l’ha aggiunta ai preferiti, ha filtrato la gerarchia ed è stata visualizzata a 390px senza avvisi di licenza non valida.
Chiavi dei nodi stabili, mappe controllate di espansione e selezione, gestione di filtro e selezione del nodo.
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>
L’illustrazione delle curve di livello è una geometria decorativa originale, non una carta reale.
La dimensione principale è impostata esplicitamente a 16px, per rendere riproducibili le dimensioni in rem.
04
Sistema di design Prime UI Configurazione dell’agente
Punto di partenza per l’implementazione
PrimeVue 4.5.5 verificato con @primeuix/themes 1.2.5. Il pacchetto PrimeVue 4 installato è distribuito con licenza MIT. Non presumere che la configurazione o i requisiti di licenza siano gli stessi per una versione principale diversa.
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
Un prompt per il tuo progetto
Prompt per l’agente
Crea la soluzione a partire dalla libreria editoriale di documenti fornita, basata su PrimeVue 4.5.5 e sul preset Aura corrispondente di @primeuix/themes 1.2.5. Mantieni l’espansione, il filtro e la selezione del Tree nativo con chiavi dei nodi stabili e tieni distinti i dettagli del documento selezionato dall’elenco dei documenti preferiti. Aggiungi e rimuovi dai preferiti i documenti effettivi, senza trasformare i nodi di categoria in documenti né creare preferiti duplicati. Mantieni la configurazione completa del provider e il layout adattabile originale CSS. Questo è l’esempio verificato per la versione quattro: non sostituirlo senza avviso con un runtime di una versione principale più recente e non trasformarlo in un flusso di approvvigionamento.
05
Sistema di design Prime UI Fonti e ambito del sistema di progettazione
Prime UI ecosistema, implementato concretamente con PrimeVue 4.5.5 e Aura 1.2.5. Questa pagina non dichiara che le API o i requisiti di licenza siano identici tra i pacchetti dei framework o nelle versioni principali più recenti. Tutti i record e i preferiti sono locali.
