Sistema de componentes empresariais · Novo recurso
Sistema de design Prime UI.
Uma implementação do PrimeVue com versão fixada do ecossistema Prime UI: uma árvore de documentos com tema Aura e referências reais de predefinição, expansão controlada, filtragem, seleção e fixação local.
PrimeVue 4.5.5 com Vue 3 e @primeuix/themes 1.2.5 Aura. Esta é uma implementação específica para Vue, não um pacote para vários frameworks. · Referência de implementação
02
Referência de design do sistema de design Prime UI
Este recurso de Prime UI implementa PrimeVue 4.5.5 com @primeuix/themes 1.2.5 Aura, em vez de afirmar que existe um único API intercambiável entre PrimeVue, PrimeReact e PrimeNG. Os valores foram examinados na predefinição instalada. A página fixa a raiz em 16px; a geometria em rem é interpretada com base nessa escolha explícita.
O sistema de design Prime UI é um ecossistema, não uma única importação
Prime UI é um ecossistema, não uma única importação
O ecossistema de interface do usuário da PrimeTek inclui implementações para diferentes frameworks. Esta página escolhe uma implementação concreta: PrimeVue 4.5.5 com Vue 3 e a predefinição Aura de @primeuix/themes 1.2.5. O arquivo de entrada completo, as importações e o exemplo de componente fazem parte dessa configuração do Vue. Um projeto React ou Angular precisa do pacote e do API correspondentes, em vez de copiar estas tags do Vue sem alterações.
Fixar a versão é importante neste caso. O pacote instalado 4.5.5 tem licença MIT, e o exemplo local verificado funciona sem uma chave de licença. Um teste com o runtime mais recente, 5.0.2, exibiu um erro de licença do PrimeUI; por isso, este exemplo não apresenta deliberadamente um comando para a versão mais recente sem ressalvas nem sugere que os termos de autorização sejam idênticos entre versões.
Tokens primitivos, semânticos e de componentes formam uma cadeia no sistema de design Prime UI
Tokens primitivos, semânticos e de componentes formam uma cadeia
O Aura separa os primitivos de cores brutas dos papéis semânticos e dos valores dos componentes. A escala primária padrão faz referência a primitivos esmeralda. No modo claro, primary.color faz referência a primary.500, hoverColor a primary.600 e activeColor a primary.700. Os papéis de destaque usam superfícies primárias mais claras e cores de primeiro plano mais escuras para a seleção.
A Tree mapeia então o fundo e o texto selecionados para os papéis de destaque, em vez de definir outra cor verde sem relação. A especificação mantém intactas as referências entre chaves, pois elas mostram como um tema propaga alterações. Substituir cada alias por um valor hexadecimal isolado ocultaria essa dependência útil.
Leia os valores da predefinição correspondente no sistema de design Prime UI
Leia os valores da predefinição correspondente
Na predefinição Aura fixada, o preenchimento e a indentação da raiz da Tree são de um rem, o preenchimento dos nós é de 0.25rem 0.5rem e o botão de alternância mede 1.75rem. O exemplo fixa o elemento html em dezesseis pixels, deixando essas dimensões explícitas. Versões diferentes da predefinição ou tamanhos de raiz distintos podem resultar em densidades diferentes, mesmo quando a marcação do componente é semelhante.
Os primitivos de raio da borda variam de zero a dois, quatro, seis, oito e doze pixels. O preenchimento horizontal compartilhado dos campos é de 0.75rem, e o vertical, de 0.5rem. O título de trinta e quatro pixels, a fonte do sistema e o espaço de vinte e quatro pixels entre colunas são escolhas originais de layout da página, externas ao tema nativo do componente.
As chaves dos nós mantêm estáveis a expansão e a seleção no sistema de design Prime UI
As chaves dos nós mantêm estáveis a expansão e a seleção
A árvore modela uma questão, três pastas e seis documentos. Cada nó tem uma chave estável e um rótulo. Os nós de pasta têm selectable:false, organizando a hierarquia sem se passarem por documentos legíveis. O modelo expandedKeys controla as pastas abertas; Expandir e Recolher substituem esse mapa de forma deliberada.
A seleção única usa selectionKeys e um manipulador node-select. Somente uma chave encontrada no mapa de registros de documentos atualiza o painel de detalhes. Renomear um rótulo visível não exige alterar sua identidade, e recolher uma pasta não apaga o documento selecionado nem seu estado fixado.
A filtragem nativa preserva o contexto do resultado no sistema de design Prime UI
A filtragem nativa preserva o contexto do resultado
A Tree ativa o filtro integrado com filterMode lenient e o texto de espaço reservado visível “Buscar um documento”. Ao pesquisar por maps, a hierarquia exibida é reduzida ao documento correspondente e seus ancestrais. Assim, o leitor ainda consegue entender onde o resultado se encaixa, em vez de receber uma lista plana e desconexa de sugestões.
Limpar o filtro restaura a hierarquia. A filtragem não altera os nós de origem nem remove documentos fixados. O painel de detalhes mantém a última folha selecionada explicitamente, evitando uma mudança inesperada de conteúdo a cada tecla. Uma coleção maior talvez precise carregar dados sob demanda, mas este exemplo completo usa seis registros locais e não afirma oferecer pesquisa no servidor.
Pesquise por “maps” e confira o contexto da questão e da pasta preservado.
Selecione “Three regional maps” para atualizar o painel do documento.
Limpe o filtro e confirme que o documento selecionado continua disponível na hierarquia.
Um documento selecionado precisa de conteúdo próprio e útil no sistema de design Prime UI
Um documento selecionado precisa de conteúdo próprio e útil
Cada documento tem um tipo, responsável, status, introdução, lista de verificação e observação específica. Um ensaio pede que se confira a sequência e as legendas; uma referência de mapas, que se verifiquem a orientação consistente e a escala independente; e uma lista de verificação de provas, que se avaliem a legibilidade e o corte. O conteúdo muda conforme a seleção, em vez de repetir o mesmo parágrafo sob seis títulos.
As etiquetas de status são metadados descritivos de exemplo. Elas não acionam um fluxo de publicação externo. O gráfico de contorno é uma geometria decorativa original, identificado como tal quando relevante; não é um mapa geográfico e não deve ser interpretado dessa forma.
O estado fixado é independente do modelo da árvore no sistema de design Prime UI
O estado fixado é independente do modelo da árvore
Fixar este documento adiciona a chave do documento atual a um array local. Quando a chave já está presente, o botão muda para “Fixado” e é desativado, impedindo entradas duplicadas. Remover uma linha fixada exclui apenas essa chave e não altera a seleção da árvore. A contagem de itens fixados é derivada do array.
Essa separação é importante porque seleção, expansão e referências salvas atendem a tarefas diferentes. É possível recolher todas as pastas e manter um ensaio selecionado aberto, ou filtrar outra parte da questão sem perder uma referência fixada. Nenhuma dessas ações implica que um documento remoto tenha sido editado.
Mantenha o modelo de teclado nativo da Tree no sistema de design Prime UI
Mantenha o modelo de teclado nativo da Tree
A Tree nativa expõe a hierarquia por meio dos papéis tree e treeitem, dos atributos de seleção e expansão e da relação entre níveis aninhados. Seu modelo de teclado usa as setas para percorrer os nós visíveis e expandir ou recolher ramificações; Enter ou Espaço seleciona o nó em foco. A página fornece um aria-label claro para a coleção.
O painel de detalhes e a lista de itens fixados usam títulos, listas e botões identificados por nomes comuns. Em dispositivos móveis, o navegador aparece antes do documento na ordem de leitura. O layout se empilha no ponto de interrupção original de 760px, sem cortar a árvore nem remover as instruções do documento, e uma linha de status informa a seleção atual.
Use chaves estáveis quando a ordem visível da árvore mudar.
Mantenha as pastas não selecionáveis quando não tiverem conteúdo de detalhes associado.
Dê aos botões “Remover” um nome de documento específico, em vez de repetir um rótulo ambíguo.
Registre o tema uma vez na raiz do Vue no sistema de design Prime UI
Registre o tema uma vez na raiz do Vue
O arquivo de entrada importa PrimeVue de primevue/config, Aura de @primeuix/themes/aura e o App.vue completo. Ele registra o plugin com theme.preset definido como Aura. darkModeSelector é false neste exemplo fixo em modo claro; em um tema de produção, a alternância de tema deve ser configurada usando as opções compatíveis da versão correspondente, em vez de misturar a documentação de uma versão principal mais recente.
Os componentes com estilos do PrimeVue geram os estilos necessários a partir da predefinição. O arquivo style.css fornecido define apenas o layout original da página e a ilustração. Nenhuma importação legada de primevue/resources/theme.css é usada. Na configuração verificada, foi selecionada uma folha da árvore, ela foi fixada, a hierarquia foi filtrada e a interface foi renderizada em 390px sem aviso de licença inválida.
Exemplos de componentes do sistema de design Prime UI
Tree nativa completa e visualização de detalhes
Chaves de nó estáveis, mapas controlados de expansão/seleção, filtragem e tratamento de seleção de nó.
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>
A ilustração de curvas de nível é uma geometria decorativa original, não um mapa real.
O tamanho da raiz é definido explicitamente como 16px para que as dimensões em rem sejam reproduzíveis.
04
Configuração do agente do sistema de design Prime UI
Ponto de partida para implementação
PrimeVue 4.5.5 verificado com @primeuix/themes 1.2.5. O pacote instalado do PrimeVue 4 usa a licença MIT. Não presuma que a mesma configuração ou os mesmos requisitos de licença se aplicam a outra versão 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
Um prompt para seu projeto
Prompt para agente de IA
Desenvolva com base na biblioteca editorial de documentos fornecida, feita com PrimeVue 4.5.5 e a predefinição Aura correspondente de @primeuix/themes 1.2.5. Preserve a expansão, a filtragem e a seleção da Tree nativa com chaves de nó estáveis, mantendo os detalhes do documento selecionado separados da lista de documentos fixados. Fixe e desafixe documentos reais sem transformar nós de categoria em documentos nem duplicar itens fixados. Mantenha toda a configuração do provedor e o CSS responsivo original. Este é o exemplo verificado da versão quatro; não o substitua silenciosamente por um runtime de uma versão principal mais recente nem o transforme em um fluxo de trabalho de compras.
05
Fontes e escopo do sistema de design Prime UI
Ecossistema Prime UI, implementado especificamente com PrimeVue 4.5.5 e Aura 1.2.5. Esta página não afirma que as APIs ou os requisitos de licença são idênticos entre pacotes de frameworks ou versões principais mais recentes. Todos os registros e itens fixados são locais.
