Sistema de componentes empresariais · Novo recurso
Sistema de design Element Plus.
Use o modelo Transfer, os filtros e as opções desativadas reais de Element Plus para criar uma bancada de seleção de módulos, com cores, tamanhos de fonte e dimensões de controles verificados.
Referência de design do sistema sistema de design Element Plus
Element Plus 2.14.7 CSS compilado padrão. As variáveis são valores verificados do pacote, incluindo aliases semânticos. O layout da transferência usa regras de composição responsiva originais, separadas da base do sistema.
Sistema de design Element Plus — Uma lista de transferência tem dois tipos de seleção
Uma lista de transferência tem dois tipos de seleção
Element Plus Transfer apresenta listas de itens disponíveis e de destino, com controles para mover os itens marcados. A bancada de módulos usa o componente Vue real da versão 2.14.7. Seu v-model contém as chaves de destino, inicialmente catalog e tokens. Marcar uma caixa de seleção em uma lista prepara um item para a próxima ação de transferência; isso não significa, por si só, que o item já pertença ao destino.
Essa distinção fica visível na leitura dinâmica do modelo. Marcar um item de origem o prepara para ser adicionado. Ao pressionar Add, o array de chaves de destino é alterado, o resumo dos módulos selecionados é atualizado e qualquer resultado aplicado anteriormente é limpo. Assim, é possível observar o contrato do modelo da biblioteca, em vez de deduzi-lo a partir de duas listas estáticas.
Sistema de design Element Plus — Funções padrão e dimensões concretas dos componentes
Funções padrão e dimensões concretas dos componentes
Element Plus expõe --el-color-primary e suas derivações claras e escuras, funções de status, cores de texto e variáveis de superfície. A tabela mostra os valores reais compilados do pacote instalado. O painel de chaves ao redor usa primary-light-9 e texto comum, enquanto o botão de ação usa o estilo primário nativo.
A tipografia padrão inclui uma base de quatorze pixels e tamanhos complementares de doze, treze, dezesseis, dezoito e vinte pixels. As variáveis de tamanho dos componentes descrevem as dimensões de controles pequenos, padrão e grandes. Não devem ser confundidas com uma escala de espaçamento para o layout da página. Os intervalos de vinte e quatro pixels e o preenchimento externo de trinta e dois pixels da bancada são escolhas explícitas da composição original.
Sistema de design Element Plus — Chaves estáveis, rótulos e opções desativadas
Chaves estáveis, rótulos e opções desativadas
Cada opção tem uma chave, um rótulo e uma indicação de desativação. O array de itens selecionados é composto por essas chaves, permitindo alterar os rótulos sem mudar a identidade dos itens. Os módulos de exemplo incluem Catálogo de ativos, Inspetor de tokens, Fila de revisão, Histórico de versões e Busca entre projetos. A exportação de auditoria permanece desativada para demonstrar uma opção visível, mas indisponível.
A disponibilidade neste exemplo é um dado estático de demonstração. Ela não representa uma verificação de permissões nem garante que esses módulos existam como produtos instaláveis. Em uma aplicação real, a fonte das opções e as regras de permissão devem vir do modelo do produto. Não presuma que há autorização só porque é possível marcar uma caixa de seleção em Transfer.
Sistema de design Element Plus: a busca altera a visibilidade, não a seleção
A busca altera a visibilidade, não a composição
A propriedade filterable adiciona buscas independentes aos painéis. O texto de orientação do campo indica uma ação concreta: Encontrar um módulo. Por padrão, a busca corresponde ao rótulo da opção. Um item selecionado pode desaparecer da lista de destino visível durante uma busca sem ser removido do array de chaves selecionadas; o resumo e a visualização continuam mostrando o conjunto completo de itens de destino.
Os espaços personalizados para os estados vazios à esquerda e à direita diferenciam um painel sem opções correspondentes do caso geral em que nada está selecionado. A página também desativa localmente Aplicar quando o array de destino está vazio. São estados distintos: não encontrar resultados na busca não significa que não há módulos selecionados.
Busque Fila de revisão no painel de itens disponíveis.
Marque a opção correspondente e pressione Adicionar.
Limpe a busca e confira se revisão aparece na visualização do modelo e na lista de destino.
Sistema de design Element Plus: preserve a relação entre as duas listas em dispositivos móveis
Preserve a relação entre as duas listas em dispositivos móveis
Em telas de computador, os painéis nativos de Transfer ficam lado a lado, com uma área exclusiva para Adicionar e Remover. Em telas com até setecentos pixels de largura, os painéis ficam empilhados e os botões de ação formam uma linha horizontal entre eles. Os títulos continuam identificando Módulos disponíveis e Módulos do espaço de trabalho, deixando clara a direção da transferência.
O ambiente de trabalho não reduz todo o controle para fazê-lo caber na tela do celular. Ele adapta a composição e mantém rótulos, caixas de seleção, campos de busca e conteúdo das listas em tamanhos nativos e legíveis. A visualização das chaves selecionadas e o resumo em texto passam para uma única coluna abaixo, preservando as mesmas informações em vez de ocultá-las em um ponto de quebra menor.
Sistema de design Element Plus: mantenha um rascunho da seleção e um instantâneo aplicado
Composição em edição e instantâneo aplicado
Aplicar localmente copia o array de chaves selecionadas. Uma alteração posterior na seleção de Transfer limpa esse estado aplicado, para que um alerta de sucesso não permaneça depois que o usuário altera o rascunho da seleção. Restaurar seleção inicial atribui um novo array catalog/tokens e também limpa o resultado aplicado. As transições de estado são descritas em poucas linhas explícitas no código-fonte Vue.
O alerta informa apenas que a seleção da prévia local foi aplicada. Ele não afirma que houve instalação, alteração de permissões ou atualização externa. Em uma tela de configurações real, o instantâneo aplicado precisaria corresponder a um resultado de persistência confirmado; um evento do componente, por si só, não confirma uma resposta do servidor.
Sistema de design Element Plus: controles nativos e instruções claras
Controles nativos e instruções claras
O exemplo mantém as caixas de seleção e os botões de transferência nativos de Transfer. Os textos dos botões são Remover e Adicionar, em vez de usar apenas ícones direcionais, o que é especialmente útil quando as listas ficam empilhadas na vertical. Os títulos dos painéis explicam os papéis de origem e destino, e a frase de ajuda explica a sequência de marcar e transferir.
A opção desativada permanece no contexto, e os espaços vazios dos painéis comunicam que não há opções correspondentes. Usuários de teclado devem conseguir acessar campos de busca, caixas de seleção e botões sem manipuladores personalizados que funcionem apenas com ponteiro. O componente gerencia seu próprio comportamento interno; a aplicação evita substituir essa estrutura por linhas desenhadas que apenas se parecem com controles de seleção.
Os títulos dos painéis identificam a lista de destino.
Os rótulos em texto mantêm clara a direção da transferência no layout empilhado.
A visualização ativa do modelo permite identificar itens selecionados que não estão visíveis.
Sistema de design Element Plus: compile o componente Vue e carregue o CSS
Compile o componente Vue e carregue CSS
Em um projeto Vue 3 com Vite, instale [email protected] e importe element-plus/dist/index.css antes do layout original CSS. O App.vue completo usa script setup e importa seus componentes diretamente. ElConfigProvider recebe a localidade em inglês para manter os textos integrados dos painéis e dos estados vazios consistentes com a página de referência em inglês.
A configuração de produção fornecida importa App.vue por meio do plugin Vue para Vite. O exemplo offline foi criado compilando o mesmo componente de arquivo único e empacotando-o localmente. Ele não precisa de CDN externo, serviço de autoimportação nem compilador de templates em tempo de execução. Se um projeto existente usa um plugin de autoimportação, mantenha os estilos gerados consistentes com a estratégia escolhida de importação completa ou por componente.
Sistema de design Element Plus: as substituições do tema devem preservar as relações entre componentes
As substituições de tema devem preservar as relações entre os componentes
CSS propriedades personalizadas são úteis para alterar papéis compartilhados sem reescrever os seletores de cada componente. O ambiente de trabalho usa as variáveis --el reais para planos de fundo, texto, bordas e cantos. Ele altera apenas os seletores de layout necessários para encaixar o Transfer nativo nesta composição específica.
Para um tema de marca mais abrangente, use a abordagem documentada com Sass ou CSS variáveis e examine em conjunto os estados de foco, desativado e ao passar o cursor. Substituir apenas o valor hexadecimal principal em uma captura de tela ignora os tons mais claros das superfícies e as interações mais escuras. A tabela baseada no código-fonte fornece os valores iniciais; a prévia nativa completa permite conferir os efeitos em um componente funcional.
Element Plus Exemplos de componentes do sistema de design
Componente completo de seleção de módulos em Vue
Um componente de arquivo único que usa Transfer, Card, Alert, Button e Tag nativos.
vue
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
O ponto de quebra e o layout ao redor são escolhas originais.
04
Configuração do agente do sistema de design Element Plus
Ponto de partida para implementação
Verificado com Vue 3 e Element Plus 2.14.7. App.vue fornece o ConfigProvider em inglês e as importações explícitas dos componentes. Todo o estado é local.
javascript
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// 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
Amplie o seletor de módulos do workspace Element Plus 2.14.7 fornecido usando o ElTransfer nativo. Mantenha os seis módulos com chaves, a entrada Audit desativada, o comportamento de filtragem e o array controlado de chaves selecionadas. Ao aplicar, capture a seleção atual de módulos; edições posteriores devem deixar esse retrato visivelmente desatualizado, enquanto restaurar retorna à seleção inicial. Preserve o layout responsivo de dois painéis e a semântica dos itens desativados, em vez de recriar o Transfer como listas sem relação entre si. Carregue a folha de estilos nativa antes da composição original CSS.
05
Fontes e escopo do sistema de design Element Plus
Referência nativa de Element Plus 2.14.7. Os nomes dos módulos e as permissões são exemplos originais; a seleção local não instala nada nem altera direitos de acesso.
