Sistema de componentes empresariales · Nuevo recurso
Sistema de diseño de Prime UI.
Una implementación de PrimeVue con versión fijada del ecosistema Prime UI: un árbol de documentos con tema Aura y referencias reales al preajuste, expansión controlada, filtrado, selección y fijación local.
PrimeVue 4.5.5 con Vue 3 y @primeuix/themes 1.2.5 Aura. Es una implementación específica para Vue, no un paquete multiplataforma. · Referencia de implementación
02
Prime UI Referencia del sistema de diseño
Este recurso Prime UI implementa PrimeVue 4.5.5 con @primeuix/themes 1.2.5 Aura, sin afirmar que exista un API intercambiable entre PrimeVue, PrimeReact y PrimeNG. Los valores se inspeccionaron en ese ajuste preestablecido instalado. La página fija la raíz en 16px; la geometría en rem se interpreta a partir de esa elección explícita.
Prime UI El sistema de diseño es un ecosistema, no una sola importación
Prime UI es un ecosistema, no una sola importación
El ecosistema de interfaz de usuario de PrimeTek incluye implementaciones para distintos frameworks. Esta página elige una concreta: PrimeVue 4.5.5 con Vue 3 y el ajuste preestablecido Aura de @primeuix/themes 1.2.5. El archivo de entrada completo, las importaciones y el ejemplo de componente corresponden a esa configuración de Vue. Un proyecto de React o Angular necesita el paquete y el API correspondientes, en lugar de copiar estas etiquetas de Vue sin modificarlas.
Fijar la versión es importante en este caso. El paquete instalado 4.5.5 incluye una licencia MIT y el ejemplo local verificado funciona sin una clave de licencia. Una prueba del entorno de ejecución más reciente, 5.0.2, mostró un error de licencia de PrimeUI; por eso, este ejemplo no presenta deliberadamente un comando genérico para instalar la última versión ni da a entender que las condiciones de autorización sean idénticas en todas las versiones.
Prime UI Los tokens primitivos, semánticos y de componentes del sistema de diseño forman una cadena
Los tokens primitivos, semánticos y de componentes forman una cadena
Aura separa los primitivos de color sin procesar de los roles semánticos y los valores de los componentes. La escala primaria predeterminada hace referencia a los primitivos esmeralda. En el modo claro, primary.color hace referencia a primary.500, hoverColor a primary.600 y activeColor a primary.700. Los roles de resaltado emplean superficies primarias más claras y colores de primer plano más oscuros para la selección.
Tree, a su vez, asigna el fondo y el texto de selección a los roles de resaltado, en lugar de codificar un segundo tono de verde sin relación. La especificación conserva las referencias entre llaves porque estas explican cómo se propagan los cambios en un tema. Sustituir cada alias por un valor hexadecimal aislado ocultaría esa útil dependencia.
Prime UI Lee los valores del ajuste preestablecido correspondiente del sistema de diseño
Lee los valores del ajuste preestablecido correspondiente
En el ajuste preestablecido Aura fijado, el relleno raíz y la sangría de Tree son de un rem cada uno, el relleno de los nodos es de 0.25rem 0.5rem y el botón de alternancia mide 1.75rem. El ejemplo fija html en dieciséis píxeles, lo que hace explícitas esas dimensiones. Distintas versiones del ajuste preestablecido o diferentes tamaños de raíz pueden producir densidades distintas, aunque el marcado del componente parezca similar.
Los primitivos de radio de borde van de cero a dos, cuatro, seis, ocho y doce píxeles. El relleno horizontal compartido de los campos es de 0.75rem y el vertical, de 0.5rem. El encabezado de treinta y cuatro píxeles, la fuente del sistema y el espacio de veinticuatro píxeles entre columnas son decisiones originales de diseño de la página, ajenas al tema nativo del componente.
Sistema de diseño Prime UI Las claves de los nodos mantienen estables la expansión y la selección
Las claves de los nodos mantienen estables la expansión y la selección
El árbol modela un número, tres carpetas y seis documentos. Cada nodo tiene una clave estable y una etiqueta. Los nodos de carpeta tienen selectable:false, por lo que organizan la jerarquía sin presentarse como documentos legibles. El modelo expandedKeys controla las carpetas abiertas; Expandir y Contraer reemplazan deliberadamente ese mapa.
La selección única utiliza selectionKeys y un controlador node-select. Solo una clave que exista en el mapa de registros de documentos actualiza el panel de detalles. Cambiar el nombre de una etiqueta visible no exige cambiar su identidad, y contraer una carpeta no borra el documento seleccionado ni su estado de elemento fijado.
Prime UI El filtrado nativo conserva el contexto de los resultados del sistema de diseño
El filtrado nativo conserva el contexto de cada coincidencia
Tree activa el filtro integrado con filterMode lenient y el texto de marcador visible «Buscar un documento». Al buscar «maps», la jerarquía mostrada se reduce al documento coincidente y sus antecesores. El lector puede seguir entendiendo dónde se encuentra el resultado, en lugar de recibir una lista plana de sugerencias sin relación.
Al borrar el filtro, se restablece la jerarquía. El filtrado no modifica los nodos de origen ni elimina los documentos fijados. El panel de detalles conserva la última hoja seleccionada explícitamente, lo que evita cambios de contenido inesperados con cada pulsación. Una colección más grande podría necesitar la carga diferida de datos, pero este ejemplo completo usa seis registros locales y no afirma ofrecer búsquedas en el servidor.
Busca «maps» y examina el contexto del número y las carpetas que se conserva.
Selecciona «Three regional maps» para actualizar el panel del documento.
Borra el filtro y confirma que el documento seleccionado sigue disponible en la jerarquía.
Prime UI Un documento seleccionado necesita contenido útil y diferenciado en el sistema de diseño
Un documento seleccionado necesita contenido útil y diferenciado
Cada documento incluye un tipo, un responsable, un estado, una introducción, una lista de comprobación y una nota específica. Un ensayo requiere comprobar la secuencia y los pies de foto; una referencia cartográfica, la coherencia de la orientación y una escala independiente; una lista de comprobación de pruebas, la legibilidad y el sangrado. El contenido cambia según la selección, en vez de repetir el mismo párrafo bajo seis títulos.
Las etiquetas de estado son metadatos descriptivos de ejemplo. No activan ningún flujo externo de publicación. El gráfico de curvas de nivel es una geometría decorativa original, identificada como tal cuando corresponde; no es un mapa geográfico y no debe interpretarse como uno.
Sistema de diseño Prime UI El estado de elemento fijado es independiente del modelo de Tree
El estado fijado es independiente del modelo de árbol
Fijar este documento añade la clave del documento actual a una matriz local. Una vez añadido, el botón cambia a «Fijado» y se desactiva para evitar duplicados. Al quitar una fila fijada, solo se elimina esa clave y la selección del árbol permanece intacta. El recuento de documentos fijados se obtiene de la matriz.
Esta separación es importante porque la selección, la expansión y las referencias guardadas resuelven tareas distintas. El usuario puede contraer todas las carpetas y mantener abierto un ensayo seleccionado, o filtrar otra parte del número sin perder una referencia fijada. Ninguna de esas acciones implica que se haya editado un documento remoto.
Sistema de diseño Prime UI: conservar el modelo de teclado nativo del árbol
Conservar el modelo de teclado nativo del árbol
El componente Tree nativo expone la jerarquía mediante los roles tree y treeitem, los atributos de selección y expansión, y la relación entre niveles anidados. Su modelo de teclado usa las flechas para recorrer los nodos visibles y expandir o contraer ramas; Intro o Espacio seleccionan el nodo enfocado. La página proporciona un aria-label claro para la colección.
El panel de detalles y la lista de elementos fijados usan encabezados, listas y botones con nombre convencionales. En móvil, el navegador precede al documento en el orden de lectura. El diseño se apila en el punto de ruptura original de 760px, sin recortar el árbol ni eliminar las instrucciones del documento, y una línea de estado indica la selección actual.
Usa claves estables cuando cambie el orden visible del árbol.
Mantén las carpetas como elementos no seleccionables cuando no tengan contenido de detalles asociado.
Asigna a los botones «Quitar» el nombre específico del documento en lugar de repetir una etiqueta ambigua.
Sistema de diseño Prime UI: registrar el tema una sola vez en la raíz de Vue
Registra el tema una sola vez en la raíz de Vue
El archivo de entrada importa PrimeVue desde primevue/config, Aura desde @primeuix/themes/aura y el archivo App.vue completo. Registra el complemento con theme.preset establecido en Aura. darkModeSelector es false en este ejemplo fijo con tema claro; en un tema de producción, el cambio de tema debe configurarse mediante las opciones admitidas en la versión correspondiente, en lugar de combinar documentación de una versión principal más reciente.
Los componentes con estilos de PrimeVue generan los estilos necesarios a partir del ajuste preestablecido. El archivo style.css proporcionado solo define el diseño original de la página y la ilustración. No se importa el archivo heredado primevue/resources/theme.css. En la configuración verificada se seleccionó una hoja del árbol, se fijó, se filtró la jerarquía y se representó a 390px sin mostrar ningún aviso de licencia no válida.
Sistema de diseño Prime UI: ejemplos de componentes
Vista nativa completa del árbol y los detalles
Claves de nodo estables, mapas controlados de expansión y selección, gestión del filtro y de la selección de nodos.
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>
La ilustración de curvas es una geometría decorativa original, no un mapa real.
El tamaño raíz se establece explícitamente en 16px para que las dimensiones en rem sean reproducibles.
04
Sistema de diseño Prime UI Configuración del agente
Punto de partida para la implementación
Verificado con PrimeVue 4.5.5 y @primeuix/themes 1.2.5. El paquete instalado de PrimeVue 4 cuenta con licencia MIT. No des por sentado que la configuración o los requisitos de licencia sean los mismos en otra versión principal.
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
Una instrucción para tu proyecto
Instrucción para el agente
Crea la solución a partir de la biblioteca editorial de documentos de PrimeVue 4.5.5 proporcionada, con el ajuste preestablecido Aura correspondiente de @primeuix/themes 1.2.5. Conserva la expansión, el filtrado y la selección nativos de Tree mediante claves de nodo estables, y mantén los detalles del documento seleccionado separados de la lista de documentos fijados. Fija y desfija documentos reales sin convertir los nodos de categoría en documentos ni duplicar elementos fijados. Conserva la configuración completa del proveedor y el diseño adaptable original CSS. Este es el ejemplo verificado para la versión cuatro; no lo sustituyas silenciosamente por un entorno de ejecución de una versión principal más reciente ni lo conviertas en un flujo de trabajo de adquisiciones.
05
Sistema de diseño Prime UI: fuentes y alcance
Prime UI Ecosistema implementado concretamente con PrimeVue 4.5.5 y Aura 1.2.5. Esta página no afirma que las API ni los requisitos de licencia sean idénticos en todos los paquetes de framework o en versiones principales más recientes. Todos los registros y elementos fijados son locales.
