Crea un selettore delle sezioni di un report con il componente Transfer controllato di Arco. Esplora le scale effettive di spaziatura e dimensioni, le convenzioni delle variabili CSS, le superfici semantiche e la differenza tra selezionare e spostare le righe.
Interpretazione autonoma HTML del comportamento di Transfer di Arco e degli ancoraggi del tema verificati; esempio nativo React fornito separatamente. · Riferimento per l’implementazione
02
Sistema di design Arco Design: riferimento di progettazione
Codice sorgente upstream di Arco React. I valori Less sono indicati con @; le variabili CSS a runtime usano --. Le spaziature dell’anteprima e il layout dei pannelli sono scelte originali dell’applicazione basate su queste scale.
Sistema di design Arco Design: Transfer rappresenta l’appartenenza, non un semplice elenco di checkbox
Scegli con attenzione le sezioni del report
Arco Transfer è utile quando un operatore deve confrontare due insiemi: le sezioni disponibili e quelle incluse in un report. Selezionare una riga la contrassegna per un’operazione successiva; la sezione non viene spostata immediatamente, a meno che non sia attiva la modalità semplice.
L’esempio mantiene esplicita l’azione in due passaggi. L’utente seleziona Canali di acquisizione, attiva Includi e poi prepara una scaletta. Questa scaletta è un’istantanea separata, quindi le modifiche successive nell’editor non riscrivono silenziosamente la versione preparata.
sistema di design Arco Design: usa separatamente la scala delle dimensioni e quella della spaziatura
Lo stesso numero può indicare dimensioni diverse
Le costanti delle dimensioni di Arco aumentano di quattro pixel alla volta, mentre la scala della spaziatura inizia con 2, 4, 6, 8, 10 e 12 prima di passare a incrementi più ampi. La dimensione predefinita del componente corrisponde a 32px. Supporre che ogni suffisso di dimensione o spaziatura indichi la stessa quantità produrrebbe controlli incoerenti.
In questa composizione originale, i due pannelli di trasferimento hanno angoli con raggio medio e un margine della pagina di 24px. Caselle di selezione piccole e divisori tra le righe supportano la selezione densa; le aree più ampie della pagina creano separazione senza sostituire contenuti utili con schede sovradimensionate.
sistema di design Arco Design: mantieni i ruoli semantici negli stili dell’applicazione
CSS: le variabili hanno una propria convenzione di denominazione
Il tema predefinito esporta variabili come --color-text-1 e --color-fill-2 senza il prefisso arco. Le build personalizzate possono modificare tale prefisso, quindi controlla il tema compilato quando lo integri in un’applicazione con namespace. Le variabili della palette principale sono canali RGB: chi le usa deve scrivere rgb(var(--primary-6)), senza trattare la variabile come un colore esadecimale completo.
L’anteprima usa il riferimento cromatico blu verificato di Arco per l’azione principale e le righe selezionate. Per una sezione con restrizioni usa una casella disabilitata e un testo esplicativo, anziché il rosso, che potrebbe suggerire un errore correggibile dall’operatore.
sistema di design Arco Design: gestisci etichette dense e nomi di sezioni lunghi
Una scala pratica per il testo del corpo
La dimensione predefinita del testo del corpo è 14px, con un moltiplicatore di interlinea di 1.5715. La famiglia pubblicata inizia con Inter e comprende alternative di sistema e CJK. È uno stack CSS, non la prova che sia stato caricato un file del font Inter.
L’etichetta di una sezione del report può essere più lunga di quella dell’esempio. La versione offline manda a capo il testo delle righe e dispone i pannelli in colonna su schermi piccoli, mantenendo leggibili le etichette Includi e Rimuovi. Non riduce l’intero widget di trasferimento fino a rendere il testo illeggibile.
sistema di design Arco Design: due array controllati evitano comportamenti ambigui
Appartenenza e selezione hanno significati diversi
targetKeys indica quali elementi sono inclusi nel report. selectedKeys indica quali caselle sono attive in quel momento in entrambi gli elenchi. onSelectChange fornisce array per sinistra e destra; concatenali per controllare selectedKeys. onChange fornisce la nuova appartenenza, la direzione e le chiavi spostate.
Mantieni stabile la chiave di ogni elemento di origine anche quando cambia l’etichetta visualizzata.
Combina gli array di selezione di sinistra e destra in onSelectChange.
Sostituisci targetKeys con il nuovo array restituito da onChange.
Azzera la selezione temporanea dopo uno spostamento e indica l’effetto locale.
sistema di design Arco Design: la ricerca restringe la visualizzazione senza modificare l’appartenenza
Specifica chiaramente la regola di corrispondenza
Il filtro predefinito dell’origine confronta la query con il valore dell’elemento usando una ricerca per sottostringa che distingue maiuscole e minuscole. L’esempio fornito sostituisce questo comportamento con una ricerca che converte il testo in minuscolo. Cercare una riga selezionata ma nascosta non deve far pensare che la riga non faccia più parte del report.
Per un elenco così piccolo, paginazione e virtualizzazione offrono pochi vantaggi. Arco mette a disposizione queste opzioni per insiemi di dati più grandi, ma l’applicazione resta responsabile delle chiavi stabili, dell’insieme completo degli elementi di destinazione e delle regole di selezione degli elementi nelle visualizzazioni filtrate.
Gli elenchi delle sezioni disponibili e incluse hanno campi di ricerca con etichette distinte.
Il messaggio di mancata corrispondenza descrive la visualizzazione filtrata, non un insieme di dati vuoto.
La preparazione di una scaletta usa targetKeys, non solo le righe attualmente visibili.
sistema di design Arco Design: la modalità scura modifica le superfici oltre al testo
Imposta il selettore pubblicato
Arco pubblica le proprie regole di sovrascrittura per la modalità scura sotto il tag del tema con arco-theme="dark". Nella build predefinita, il tag è body. Rimuovendo quell’attributo si ripristinano le regole normali; aggiungere una classe non correlata chiamata dark non è la stessa cosa API.
Se aggiungi un’anteprima scura, definisci insieme i ruoli del contenitore e del testo. L’esempio offline resta intenzionalmente chiaro, mentre l’esempio nativo può usare il tema CSS già importato. Non invertire i colori delle miniature dei report o delle illustrazioni applicando un filtro indiscriminato.
sistema di design Arco Design: pacchetto, foglio di stile e confini effettivi
Una scaletta del report non esporta i dati del report
Il pacchetto React è @arco-design/web-react e il relativo punto d’ingresso completo CSS è dist/css/arco.css. L’esempio importa Transfer e Button dalla radice del pacchetto e usa uno stato controllato, senza inventare un’API per la creazione di report.
L’anteprima autonoma riproduce il comportamento di selezione usando caselle e pulsanti nativi, così da funzionare offline. Verifica la logica di interazione e la composizione reattiva, ma non dimostra che il pacchetto nativo sia stato compilato in un progetto che lo utilizza. Un esportatore di produzione richiederebbe un backend e verifiche delle autorizzazioni, assenti in un esempio con righe disabilitate.
Esempi di componenti del sistema di design Arco Design
Esempio interattivo completo e autonomo
Salva l’intero documento come index.html e aprilo in un browser. Interpretazione autonoma HTML del comportamento di Arco Transfer e riferimenti verificati al tema; esempio nativo React fornito separatamente.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Arco report section transfer</title><style>
*{box-sizing:border-box}body{margin:0;color:#1d2129;background:#f7f8fa;font:14px/22px Arial,sans-serif}header{padding:20px 28px;background:white;border-bottom:1px solid #e5e6eb;display:flex;justify-content:space-between}.logo{font-size:18px;font-weight:bold;letter-spacing:-.02em}.logo i{font-style:normal;color:#165dff;margin-right:8px}header small{color:#4e5969}main{max-width:1050px;padding:28px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}.lead{color:#4e5969;margin:0 0 24px}.transfer{display:grid;grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr);align-items:stretch}.list{border:1px solid #e5e6eb;background:white;border-radius:4px;min-width:0}.head{padding:16px;background:#f2f3f5;display:flex;gap:8px;justify-content:space-between}.head h2{font-size:14px;margin:0}.count{font-size:12px;color:#4e5969}.search{padding:12px;border-bottom:1px solid #e5e6eb}.search label{font-size:12px;display:block;margin-bottom:4px;color:#4e5969}.search input{height:32px;width:100%;border:1px solid transparent;background:#f2f3f5;padding:4px 12px;font:inherit;border-radius:2px}input:focus,button:focus-visible{outline:2px solid #165dff;outline-offset:2px}.items{min-height:290px;padding:8px}.item{display:flex;gap:10px;padding:12px 8px;border-radius:2px;align-items:start;cursor:pointer}.item:has(input:checked){background:#e8f3ff}.item input{width:16px;height:16px;accent-color:#165dff;margin-top:3px;flex-shrink:0}.item small{display:block;color:#4e5969;font-size:12px}.item:has(input:disabled){color:#86909c;cursor:not-allowed}.ops{padding:16px 12px;display:flex;flex-direction:column;gap:12px;justify-content:center}button{font:14px/22px Arial;border:1px solid #e5e6eb;background:white;color:#1d2129;border-radius:2px;padding:5px 12px;cursor:pointer}.ops button{padding:5px 4px}.primary{background:#165dff;border-color:#165dff;color:#fff}button:disabled{background:#f2f3f5;color:#86909c;border-color:#e5e6eb;cursor:not-allowed}.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}.footer p{font-size:12px;color:#4e5969;margin:0}.outline{background:white;border:1px solid #e5e6eb;border-radius:4px;padding:24px}.outline h2{font-size:16px;margin:0 0 12px}.outline ol{margin:0;padding-left:20px}.note{color:#4e5969;font-size:12px;margin-top:20px}.empty{padding:20px 8px;color:#4e5969}.selection{font-size:12px;color:#4e5969;padding:10px 16px;border-top:1px solid #e5e6eb}@media(max-width:650px){main{padding:24px 16px}.transfer{grid-template-columns:1fr}.ops{flex-direction:row;padding:12px}.ops button{padding:6px 16px}.items{min-height:160px}.footer{align-items:start;flex-direction:column}header{padding:16px}}
</style><header><span class="logo"><i>A /</i> Analytics workspace</span><small>Report studio</small></header><main><h1>Choose report sections</h1><p class="lead">Build an outline from the sections available to this workspace.</p><div class="transfer"><section class="list"><div class="head"><h2>Available sections</h2><span id="left-count" class="count"></span></div><div class="search"><label for="left-search">Find available section</label><input id="left-search" type="search" placeholder="Search by section name"></div><div class="items" id="left"></div><div class="selection" id="left-selected"></div></section><div class="ops"><button class="primary" id="include" disabled>Include →</button><button id="remove" disabled>← Remove</button></div><section class="list"><div class="head"><h2>Included in report</h2><span id="right-count" class="count"></span></div><div class="search"><label for="right-search">Find included section</label><input id="right-search" type="search" placeholder="Search included sections"></div><div class="items" id="right"></div><div class="selection" id="right-selected"></div></section></div><div class="footer"><p id="status" role="status">Select a section, then choose Include or Remove.</p><button id="prepare" class="primary">Prepare outline</button></div><section class="outline"><h2>Prepared outline</h2><div id="snapshot">No outline prepared yet.</div></section><p class="note">HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported</p></main><script>
const data=[{key:'overview',value:'Executive overview',detail:'A concise summary of the reporting period'},{key:'traffic',value:'Acquisition channels',detail:'How people arrive at your product'},{key:'retention',value:'Retention cohorts',detail:'Returning usage by cohort'},{key:'revenue',value:'Revenue breakdown',detail:'Revenue categories and trends'},{key:'raw',value:'Raw event export',detail:'Restricted · unavailable in this specimen',disabled:true}];const $=id=>document.getElementById(id);let target=new Set(['overview']),selected=new Set();
function render(){for(const side of ['left','right']){const items=data.filter(x=>target.has(x.key)===(side==='right')),query=$(side+'-search').value.toLowerCase(),host=$(side);host.replaceChildren();$(side+'-count').textContent=items.length+' sections';const visible=items.filter(x=>x.value.toLowerCase().includes(query));if(!visible.length){const p=document.createElement('p');p.className='empty';p.textContent=query?'No matching sections.':'No sections in this column.';host.append(p)}for(const item of visible){const label=document.createElement('label');label.className='item';const input=document.createElement('input');input.type='checkbox';input.id='check-'+item.key;input.checked=selected.has(item.key);input.disabled=!!item.disabled;input.setAttribute('aria-label',item.value);input.onchange=()=>{input.checked?selected.add(item.key):selected.delete(item.key);render();$('check-'+item.key)?.focus()};const text=document.createElement('span'),small=document.createElement('small');text.textContent=item.value;small.textContent=item.detail;text.append(small);label.append(input,text);host.append(label)}$(side+'-selected').textContent=items.filter(x=>selected.has(x.key)).length+' selected'}$('include').disabled=!data.some(x=>selected.has(x.key)&&!target.has(x.key)&&!x.disabled);$('remove').disabled=!data.some(x=>selected.has(x.key)&&target.has(x.key)&&!x.disabled);$('prepare').disabled=!target.size}
function move(toTarget){const moved=data.filter(x=>selected.has(x.key)&&target.has(x.key)!==toTarget&&!x.disabled);for(const item of moved)toTarget?target.add(item.key):target.delete(item.key);selected.clear();render();$('status').textContent=moved.length+' section(s) '+(toTarget?'included in':'removed from')+' the local draft.';$(toTarget?'right-search':'left-search').focus()}
$('include').onclick=()=>move(true);$('remove').onclick=()=>move(false);for(const side of ['left','right'])$(side+'-search').oninput=render;$('prepare').onclick=()=>{const ol=document.createElement('ol');for(const item of data.filter(x=>target.has(x.key))){const li=document.createElement('li');li.textContent=item.value;ol.append(li)}$('snapshot').replaceChildren(ol);$('status').textContent='Local report outline prepared. No data exported.'};render();
</script></html>
La sezione del report con restrizioni non può essere spostata. Le righe selezionate e le sezioni incluse sono stati distinti, in linea con la distinzione illustrata per Transfer nativo.
Trasferimento controllato delle sezioni del report
Transfer gestisce l’appartenenza agli elenchi di origine e di destinazione, mentre lo stato dell’applicazione conserva una scaletta preparata separatamente. Una riga con restrizioni mostra un’opzione disabilitata senza fingere di imporre l’autorizzazione lato server.
jsx
// npm install @arco-design/web-react react react-dom
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Transfer,Button} from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
const data = [
{key:'overview',value:'Executive overview'},
{key:'traffic',value:'Acquisition channels'},
{key:'retention',value:'Retention cohorts'},
{key:'revenue',value:'Revenue breakdown'},
{key:'raw',value:'Raw event export (restricted)',disabled:true}
];
function ReportBuilder(){
const [target,setTarget]=useState(['overview']);
const [selected,setSelected]=useState([]);
const [snapshot,setSnapshot]=useState([]);
const [status,setStatus]=useState('Choose sections for a local report.');
return <main style={{padding:24,maxWidth:960,margin:'auto'}}>
<h1>Report sections</h1>
<Transfer dataSource={data} targetKeys={target} selectedKeys={selected}
titleTexts={['Available sections','Included in report']}
operationTexts={['Include','Remove']}
showSearch searchPlaceholder={['Find available section','Find included section']}
filterOption={(query,item)=>item.value.toLowerCase().includes(query.toLowerCase())}
onSelectChange={(left,right)=>setSelected([...left,...right])}
onChange={(keys,direction,moved)=>{
setTarget(keys);setSelected([]);
setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`);
}} />
<p role="status">{status}</p>
<Button type="primary" disabled={!target.length} onClick={()=>{
setSnapshot([...target]);setStatus('Local report outline prepared. No data exported.');
}}>Prepare outline</Button>
<h2>Prepared outline</h2>
{snapshot.length ? <ol>{snapshot.map(key=><li key={key}>{data.find(item=>item.key===key).value}</li>)}</ol> : <p>No outline prepared yet.</p>}
</main>;
}
createRoot(document.getElementById('root')).render(<ReportBuilder />);
La selezione delle caselle e l’appartenenza al report sono array distinti.
Il filtro personalizzato non distingue tra maiuscole e minuscole.
I dati di esempio sono originali; non vengono caricati né esportati dati analitici. La compilazione nativa resta una verifica d’integrazione separata.
04
Configurazione dell’agente del sistema di design Arco Design
Punto di partenza per l’implementazione
Importa una sola volta il foglio di stile completo arco.css e monta l’esempio React in un elemento radice. Non combinare questo pacchetto React con importazioni di Arco Vue.
Usa Arco React Transfer con chiavi stabili in dataSource e targetKeys e selectedKeys controllati separatamente. Fornisci un filtro senza distinzione tra maiuscole e minuscole, azioni esplicite Includi/Rimuovi e un’istantanea della scaletta preparata. Mantieni la sintassi delle variabili CSS di Arco e descrivi con precisione l’interpretazione offline.
05
Fonti e ambito del sistema di design Arco Design
Riferimento indipendente OpenDesign. Dati originali del report e anteprima solo locale; le righe disabilitate non costituiscono un limite di autorizzazione.
