Usa il modello Transfer, i filtri e le opzioni disabilitate effettivi di Element Plus per creare un ambiente di lavoro per la selezione dei moduli, con colori, dimensioni tipografiche e dimensioni dei controlli verificati.
Riferimento di progettazione del sistema sistema di design Element Plus
Element Plus 2.14.7 predefinito compilato CSS. Le variabili riportano i valori verificati del pacchetto, inclusi gli alias semantici. Il layout di trasferimento usa le regole originali di composizione responsive, separate dalle fondamenta del sistema.
Sistema di design Element Plus Sistema di progettazione: una lista di trasferimento prevede due tipi di selezione
Una lista di trasferimento prevede due tipi di selezione
Element Plus Transfer presenta liste di elementi disponibili e di destinazione, con controlli per spostare gli elementi selezionati. L'area di lavoro dei moduli usa il componente Vue effettivo della versione 2.14.7. Il suo v-model contiene le chiavi di destinazione, inizialmente catalog e tokens. Una casella di controllo all'interno di una lista contrassegna un elemento per la successiva azione di trasferimento; non indica che l'elemento appartenga già alla destinazione.
Questa distinzione è resa visibile dalla lettura in tempo reale del modello. Selezionando un elemento di origine lo si prepara per l'aggiunta. Premendo Add si modifica l'array delle chiavi di destinazione, si aggiorna il riepilogo dei moduli selezionati e si cancella ogni risultato applicato in precedenza. In questo modo è possibile osservare il contratto del modello della libreria senza doverlo dedurre da due liste statiche.
Sistema di design Element Plus Sistema di progettazione: ruoli predefiniti e dimensioni concrete dei componenti
Ruoli predefiniti e dimensioni concrete dei componenti
Element Plus espone --el-color-primary e le relative varianti chiare e scure, i ruoli di stato, i colori del testo e le variabili delle superfici. La tabella riporta i valori effettivi compilati del pacchetto installato. Il pannello delle chiavi circostante usa primary-light-9 e il testo ordinario, mentre il pulsante di azione adotta lo stile primario nativo.
La tipografia predefinita include una dimensione base di quattordici pixel, con dimensioni complementari di dodici, tredici, sedici, diciotto e venti pixel. Le variabili relative alle dimensioni dei componenti descrivono le misure piccola, predefinita e grande dei controlli. Non vanno confuse con una scala di spaziatura per il layout di pagina. Gli spazi di ventiquattro pixel e la spaziatura esterna di trentadue pixel dell'area di lavoro sono scelte di composizione originali ed esplicite.
Sistema di design Element Plus Sistema di progettazione: chiavi stabili, etichette e opzioni disabilitate
Chiavi stabili, etichette e opzioni disabilitate
Ogni opzione ha una chiave, un'etichetta e un flag di disabilitazione. L'array selezionato contiene queste chiavi, consentendo di cambiare le etichette senza modificarne l'identità. I moduli di esempio includono Catalogo risorse, Ispezione dei token, Coda di revisione, Cronologia delle versioni e Ricerca tra progetti. Esportazione audit resta disabilitata per mostrare un'opzione visibile ma non disponibile.
La disponibilità in questo esempio è un dato dimostrativo statico. Non rappresenta una verifica dei diritti di accesso e non garantisce che questi moduli esistano come prodotti installabili. In un'applicazione reale, la fonte delle opzioni e le regole di autorizzazione devono provenire dal modello del prodotto. Non dedurre le autorizzazioni dal fatto che sia possibile fare clic su una casella di controllo Transfer.
Sistema di design Element Plus Sistema di progettazione: la ricerca modifica la visibilità, non l'appartenenza
La ricerca modifica la visibilità, non l'appartenenza
filterable aggiunge ricerche indipendenti ai pannelli. Il testo segnaposto del filtro suggerisce un'azione concreta: Trova un modulo. Il filtro predefinito confronta l'etichetta dell'opzione. Durante una ricerca, un elemento selezionato può scomparire dalla lista di destinazione visibile senza essere rimosso dall'array delle chiavi selezionate; il riepilogo e la lettura continuano a mostrare l'intero insieme di destinazione.
Gli slot personalizzati per lo stato vuoto a sinistra e a destra distinguono un pannello senza opzioni corrispondenti dal caso globale in cui non è selezionato nulla. La pagina disabilita inoltre localmente Apply quando l'array di destinazione è vuoto. Sono stati distinti: nessuna corrispondenza nella ricerca non significa nessun modulo selezionato.
Cerca Review queue nel pannello degli elementi disponibili.
Seleziona l'opzione corrispondente e premi Add.
Cancella la ricerca e verifica che review compaia nella lettura del modello e nella lista di destinazione.
Sistema di design Element Plus Sistema di progettazione: mantieni la relazione tra le due liste sui dispositivi mobili
Mantieni la relazione tra le due liste sui dispositivi mobili
Su desktop, i pannelli Transfer nativi sono affiancati, con un'area dedicata ai comandi Add e Remove. Sugli schermi larghi al massimo settecento pixel, i pannelli si dispongono in verticale e i pulsanti di azione formano una riga orizzontale tra loro. I titoli continuano a identificare i Moduli disponibili e i Moduli dell'area di lavoro, così la direzione dello spostamento resta chiara.
L'area di lavoro non riduce l'intero controllo per adattarlo allo schermo del telefono. Adatta la composizione mantenendo etichette, caselle di controllo, ricerche e contenuti delle liste alle dimensioni native e leggibili. La lettura delle chiavi selezionate e il riepilogo testuale passano a un'unica colonna sottostante, conservando le stesse informazioni anziché nasconderle al breakpoint più stretto.
Sistema di design Element Plus Sistema di progettazione: appartenenza provvisoria e istantanea applicata
Appartenenza provvisoria e istantanea applicata
Applica localmente copia l'array delle chiavi selezionate. Una successiva modifica del trasferimento azzera lo stato applicato, così l'avviso di operazione riuscita non resta visibile dopo che l'utente ha modificato la selezione temporanea. Ripristina selezione iniziale assegna un nuovo array di catalogo/token e azzera anche il risultato applicato. Le transizioni di stato sono espresse in poche righe esplicite nel codice sorgente Vue.
L'avviso indica soltanto che la selezione dell'anteprima locale è stata applicata. Non dichiara che sia avvenuta un'installazione, una modifica dei diritti o un aggiornamento esterno. In una vera schermata delle impostazioni, lo stato applicato dovrebbe corrispondere a un risultato di persistenza confermato; un evento del componente, da solo, non costituisce una conferma del server.
Element Plus Controlli nativi del sistema di design e istruzioni comprensibili
Controlli nativi e istruzioni comprensibili
L'esempio mantiene le caselle di controllo e i pulsanti di trasferimento nativi di Transfer. Il testo dei pulsanti è impostato su Rimuovi e Aggiungi, anziché lasciare soltanto icone direzionali, una scelta particolarmente utile quando gli elenchi sono disposti in verticale. I titoli dei pannelli chiariscono i ruoli di origine e destinazione, mentre la frase di aiuto spiega la sequenza: selezionare e poi spostare.
L'opzione disabilitata resta visibile nel contesto e gli slot vuoti del pannello indicano che non ci sono opzioni corrispondenti. Chi usa la tastiera deve poter raggiungere i campi di ricerca, le caselle di controllo e i pulsanti senza gestori personalizzati utilizzabili solo con il puntatore. Il componente gestisce il proprio comportamento interno; l'applicazione evita di sostituire questa struttura con righe disegnate che si limitano a sembrare controlli di selezione.
I titoli dei pannelli indicano quale elenco è la destinazione.
Le etichette testuali mantengono chiara la direzione del trasferimento nel layout a colonne sovrapposte.
La visualizzazione in tempo reale del modello rende individuabili gli elementi selezionati non visibili.
Sistema di design Element Plus Compilare il componente Vue e caricare CSS
Compila il componente Vue e carica CSS
In un progetto Vue 3 Vite, installa [email protected] e importa element-plus/dist/index.css prima del layout originale CSS. Il file App.vue completo usa script setup e importa direttamente i componenti. ElConfigProvider riceve la lingua inglese, così i testi integrati dei pannelli e dello stato vuoto restano coerenti con la pagina di riferimento in inglese.
La configurazione fornita, adatta alla produzione, importa App.vue tramite il plugin Vue Vite. L'esempio offline è stato creato compilando lo stesso componente a file singolo e includendolo localmente nel bundle. Non richiede una CDN esterna, un servizio di importazione automatica né un compilatore di template a runtime. Se un progetto esistente usa un plugin di importazione automatica, mantieni gli stili generati coerenti con la strategia scelta per l'importazione completa o per singolo componente.
Element Plus Le personalizzazioni del tema del sistema di design devono preservare le relazioni tra i componenti
Le personalizzazioni del tema devono preservare le relazioni tra i componenti
Le proprietà personalizzate CSS sono utili per modificare i ruoli condivisi senza riscrivere i selettori di ogni componente. L'ambiente di lavoro usa le variabili --el effettive per sfondo, testo, bordi e angoli. Modifica solo i selettori di layout necessari per adattare Transfer nativo a questa specifica composizione.
Per un tema di brand più ampio, usa l'approccio documentato basato su Sass o sulle variabili CSS ed esamina insieme gli stati hover, disabilitato e focus. Sostituire il solo valore esadecimale del colore principale in uno screenshot non tiene conto delle superfici più chiare e delle interazioni più scure. La tabella basata sul codice sorgente fornisce i valori iniziali; l'anteprima nativa completa permette di esaminarne gli effetti su un componente funzionante.
Element Plus Esempi di componenti del sistema di design
Componente Vue completo per la selezione dei moduli
Un componente a file singolo che usa Transfer, Card, Alert, Button e Tag nativi.
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>
Il punto di interruzione e il layout circostante sono scelte originali.
04
Sistema di design Element Plus Configurazione dell'agente
Punto di partenza per l’implementazione
Verificato con Vue 3 e Element Plus 2.14.7. App.vue fornisce ConfigProvider in inglese e importa esplicitamente i componenti. Tutto lo stato è locale.
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
Un prompt per il tuo progetto
Prompt per l’agente
Estendi il selettore dei moduli dell'area di lavoro Element Plus 2.14.7 fornita usando ElTransfer nativo. Mantieni i sei moduli con chiave, la voce Audit disabilitata, il comportamento di filtro e l'array controllato delle chiavi selezionate. L'applicazione deve acquisire la selezione corrente dei moduli; le modifiche successive devono rendere visibilmente obsoleta quella fotografia, mentre il ripristino deve riportare alla selezione iniziale. Mantieni il layout adattabile a due pannelli e il comportamento degli elementi disabilitati, senza ricostruire Transfer come elenchi indipendenti. Carica il foglio di stile nativo prima della composizione originale CSS.
05
Element Plus Fonti e ambito del sistema di design
Riferimento nativo Element Plus 2.14.7. I nomi dei moduli e le autorizzazioni sono esempi originali; la selezione locale non comporta installazioni né modifiche dei diritti.
