Système de composants d’entreprise · Nouvelle ressource
Système de design Prime UI.
Une implémentation PrimeVue dont la version est figée dans l’écosystème Prime UI : un arbre de documents au thème Aura avec les références réelles aux préréglages, l’expansion contrôlée, le filtrage, la sélection et l’épinglage local.
PrimeVue 4.5.5 avec Vue 3 et @primeuix/themes 1.2.5 Aura. Il s’agit d’une implémentation spécifique à Vue, et non d’un package multiplateforme. · Référence de mise en œuvre
02
Référence de conception du système de design Prime UI
Cette ressource Prime UI implémente PrimeVue 4.5.5 avec @primeuix/themes 1.2.5 Aura, sans prétendre fournir un seul API interchangeable entre PrimeVue, PrimeReact et PrimeNG. Les valeurs ont été examinées à partir de ce préréglage installé. La page fixe la taille de police racine à 16 px ; les dimensions en rem sont interprétées selon ce choix explicite.
Système de design Prime UI : un écosystème, pas un simple import
Prime UI : un écosystème, pas un simple import
L’écosystème d’interfaces utilisateur de PrimeTek comprend des implémentations pour différents frameworks. Cette page en choisit une concrète : PrimeVue 4.5.5 avec Vue 3 et le préréglage Aura de @primeuix/themes 1.2.5. Le fichier d’entrée complet, les imports et l’exemple de composant correspondent à cette configuration Vue. Un projet React ou Angular nécessite son package et son API correspondants, plutôt que de reprendre ces balises Vue sans modification.
Le choix précis de la version est important ici. Le package installé en version 4.5.5 est sous licence MIT et l’exemple local vérifié fonctionne sans clé de licence. Un test de l’environnement d’exécution plus récent en version 5.0.2 a affiché une erreur de licence PrimeUI ; cet exemple n’utilise donc volontairement pas de commande indiquant sans réserve la dernière version et ne laisse pas entendre que les conditions d’autorisation sont identiques d’une version à l’autre.
Système de design Prime UI : les jetons primitifs, sémantiques et de composants forment une chaîne
Les jetons primitifs, sémantiques et de composants forment une chaîne
Aura sépare les couleurs primitives brutes des rôles sémantiques et des valeurs de composants. La palette primaire par défaut fait référence aux couleurs primitives émeraude. En mode clair, primary.color fait référence à primary.500, hoverColor à primary.600 et activeColor à primary.700. Les rôles de mise en évidence utilisent des surfaces primaires plus claires et des couleurs de premier plan plus sombres pour la sélection.
L’arborescence associe ensuite son arrière-plan et son texte de sélection aux rôles de mise en évidence, au lieu de coder en dur un autre vert sans rapport. La spécification conserve les références entre accolades, car elles expliquent comment un thème répercute les modifications. Remplacer chaque alias par une valeur hexadécimale isolée masquerait cette dépendance utile.
Système de design Prime UI : lire les valeurs du préréglage correspondant
Lire les valeurs du préréglage correspondant
Dans le préréglage Aura épinglé, le remplissage à la racine de l’arborescence et son retrait sont tous deux d’un rem, le remplissage des nœuds est de 0,25 rem 0,5 rem et le bouton de bascule mesure 1,75 rem. L’exemple fixe la taille de police de html à seize pixels, ce qui rend ces dimensions explicites. Des versions différentes du préréglage ou des tailles racines différentes peuvent modifier la densité, même si le balisage du composant semble similaire.
Les rayons de bordure primitifs vont de zéro à douze pixels, en passant par deux, quatre, six et huit pixels. Le remplissage partagé des champs est de 0,75 rem à l’horizontale et de 0,5 rem à la verticale. Le titre de trente-quatre pixels, la police système et l’écart de vingt-quatre pixels entre les colonnes sont des choix de mise en page propres à la page, indépendants du thème natif du composant.
Système de design Prime UI : les clés des nœuds stabilisent le développement et la sélection
Les clés des nœuds stabilisent le développement et la sélection
L’arborescence représente un problème, trois dossiers et six documents terminaux. Chaque nœud possède une clé stable et un libellé. Les nœuds de dossier ont selectable:false : ils organisent la hiérarchie sans prétendre être des documents lisibles. Le modèle expandedKeys contrôle l’ouverture des dossiers ; les commandes Expand et Collapse remplacent délibérément cette structure.
La sélection unique utilise selectionKeys et un gestionnaire node-select. Seule une clé présente dans la table des documents met à jour le panneau de détails. Renommer un libellé visible ne nécessite pas de changer son identité, et réduire un dossier n’efface ni le document actuellement sélectionné ni son état épinglé.
Système de design Prime UI : le filtrage natif préserve le contexte du résultat
Le filtrage natif préserve le contexte du résultat
L’arbre active son filtre intégré avec filterMode lenient et un espace réservé visible « Rechercher un document ». La recherche de « cartes » réduit la hiérarchie affichée au document correspondant et à ses ancêtres. Le lecteur peut toujours comprendre où se situe le résultat, au lieu de recevoir une liste plate de suggestions sans rapport entre elles.
Effacer le filtre rétablit la hiérarchie. Le filtrage ne modifie pas les nœuds source et ne supprime pas les documents épinglés. Le panneau de détail conserve la dernière feuille sélectionnée explicitement, évitant ainsi un changement de contenu inattendu à chaque frappe. Une collection plus importante pourrait nécessiter un chargement différé des données, mais cet exemple complet utilise six enregistrements locaux et ne prétend pas effectuer de recherche côté serveur.
Recherchez « cartes » et examinez le contexte conservé du dossier ou du numéro.
Sélectionnez « Trois cartes régionales » pour mettre à jour le panneau du document.
Effacez le filtre et vérifiez que le document sélectionné est toujours disponible dans la hiérarchie.
Système de design Prime UI A : un document sélectionné doit présenter un contenu utile et distinctif
Un document sélectionné doit présenter un contenu utile et distinct
Chaque document comporte un type, un propriétaire, un statut, une introduction, une liste de vérification et une note spécifique. Un essai demande de vérifier l’ordre et les légendes ; une référence cartographique, la cohérence de l’orientation et l’indépendance de l’échelle ; une liste de vérification pour les épreuves, la lisibilité et le fond perdu. Le contenu change selon la sélection au lieu de reprendre le même paragraphe sous six titres différents.
Les balises de statut restent de simples métadonnées descriptives dans cet exemple. Elles ne déclenchent aucun processus de publication externe. Le graphique de courbes de niveau est une géométrie décorative originale, indiquée comme telle lorsque c’est pertinent ; ce n’est pas une carte géographique et il ne faut pas l’interpréter comme telle.
Système de design Prime UI P : l’état épinglé est indépendant du modèle de l’arbre
L’état épinglé est indépendant du modèle arborescent
Épingler ce document ajoute la clé du document actuel à un tableau local. Une fois l’élément ajouté, le bouton devient « Épinglé » et est désactivé, ce qui empêche les doublons. La suppression d’une ligne épinglée retire uniquement cette clé et ne modifie pas la sélection dans l’arbre. Le nombre d’éléments épinglés est calculé à partir du tableau.
Cette séparation est importante, car la sélection, le déploiement et les références enregistrées répondent à des besoins différents. Un utilisateur peut réduire tous les dossiers tout en gardant un essai sélectionné ouvert, ou filtrer une autre partie du numéro sans perdre une référence épinglée. Aucune de ces actions ne signifie qu’un document distant a été modifié.
Système de design Prime UI : conservez le modèle de clavier natif de l’arbre
Conservez le modèle de clavier natif de l’arbre
L’arbre natif expose la hiérarchie au moyen des rôles tree et treeitem, des attributs de sélection et de déploiement, ainsi que des relations entre les niveaux imbriqués. Son modèle de clavier utilise les flèches pour parcourir les nœuds visibles et développer ou réduire les branches ; les touches Entrée ou Espace sélectionnent le nœud ayant le focus. La page fournit un aria-label clair pour la collection.
Le panneau de détail et la liste des éléments épinglés utilisent des titres, des listes et des boutons nommés classiques. Sur mobile, le navigateur précède le document dans l’ordre de lecture. La mise en page s’empile au point de rupture d’origine de 760px, sans couper l’arbre ni supprimer les instructions du document ; une ligne d’état indique la sélection actuelle.
Utilisez des clés stables lorsque l’ordre des nœuds visibles change.
Rendez les dossiers non sélectionnables lorsqu’aucun contenu détaillé ne leur est associé.
Donnez aux boutons de suppression un libellé précisant le nom du document, plutôt que de répéter un libellé ambigu.
Système de design Prime UI : enregistrez le thème une seule fois à la racine de Vue
Enregistrer le thème une seule fois à la racine Vue
Le fichier d’entrée importe PrimeVue depuis primevue/config, Aura depuis @primeuix/themes/aura et le fichier complet App.vue. Il enregistre le plug-in avec theme.preset défini sur Aura. darkModeSelector vaut false dans cet exemple fixe en mode clair ; en production, le changement de thème doit être configuré à l’aide des options prises en charge par la version correspondante, sans mélanger la documentation d’une version majeure plus récente.
Les composants stylés de PrimeVue génèrent les styles nécessaires à partir du préréglage. Le fichier style.css fourni définit uniquement la mise en page originale et l’illustration. Aucun import hérité de primevue/resources/theme.css n’est utilisé. La configuration vérifiée a sélectionné une feuille de l’arbre, l’a épinglée, a filtré la hiérarchie et s’est affichée à 390px sans avertissement de licence invalide.
Clés de nœud stables, cartes contrôlées de déploiement et de sélection, gestion du filtre et de la sélection des nœuds.
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’illustration de courbes de niveau est une géométrie décorative originale, et non une véritable carte.
La taille de police racine est explicitement définie à 16px pour que les dimensions en rem soient reproductibles.
04
Système de design Prime UI Configuration de l’agent
Point de départ de l’implémentation
Vérifié avec PrimeVue 4.5.5 et @primeuix/themes 1.2.5. Le paquet PrimeVue 4 installé est sous licence MIT. Ne présumez pas que la configuration ou les exigences de licence sont identiques pour une autre version majeure.
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 pour votre projet
Prompt pour l’agent IA
Créez votre solution à partir de la bibliothèque éditoriale de documents PrimeVue 4.5.5 fournie, avec le préréglage Aura correspondant de @primeuix/themes 1.2.5. Préservez le déploiement, le filtrage et la sélection de l’arbre natif à l’aide de clés de nœud stables, et distinguez le détail du document sélectionné de la liste des documents épinglés. Épinglez et désépinglez des documents réels sans transformer les catégories en documents ni créer de doublons. Conservez la configuration complète du fournisseur et la mise en page adaptative originale CSS. Il s’agit de l’exemple vérifié pour la version 4 ; ne le remplacez pas silencieusement par un environnement d’exécution d’une version majeure plus récente et n’en faites pas un processus d’approvisionnement.
05
Système de design Prime UI Sources et portée
Prime UI écosystème, mis en œuvre concrètement avec PrimeVue 4.5.5 et Aura 1.2.5. Cette page ne prétend pas que les API ou les exigences de licence sont identiques dans les différents paquets de framework ou les versions majeures plus récentes. Tous les enregistrements et les éléments épinglés sont locaux.
