Crea un editor compatto di criteri API con TDesign React: ruoli concreti del tema, scala delle dimensioni di due pixel, registrazione dei campi Form e composizione tipizzata di Table.
Interpretazione autonoma di HTML/CSS dei token chiari TDesign e della composizione Form/Table; non è il runtime nativo di React. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design TDesign
TDesign React con i temi pubblici attuali del branch develop e i sorgenti dei componenti. I valori del tema sono istantanee dei sorgenti, non una garanzia di compatibilità con una versione bloccata del pacchetto. L’anteprima autonoma è un’interpretazione di HTML; l’esempio React usa il vero pacchetto API.
Sistema di progettazione sistema di design TDesign: un sistema per console con famiglie di implementazioni distinte
Scegli l’implementazione di React
TDesign offre implementazioni distinte per framework. Questo esempio usa intenzionalmente tdesign-react, non un pacchetto Vue dal nome simile né l’insieme di componenti per dispositivi mobili. Il foglio di stile globale fa parte dell’integrazione: importare un componente da solo non fornisce le regole di layout e tema mostrate.
L’unità funzionale è un Form registrato affiancato a una Table strutturata. Nome, percorso della risorsa e stato di abilitazione sono campi dati; la rimozione di una riga è un’azione della tabella. Affermare che ora l’intero sito è protetto da un API sarebbe falso, perché questo esempio non dispone di un backend di autorizzazione.
Sistema di progettazione sistema di design TDesign: colori semantici, incluse le differenze effettive tra modalità chiara e scura
Il livello 7 del brand non è universale tra le modalità
Nel tema chiaro il ruolo del brand corrisponde al livello 7, mentre nel tema scuro corrisponde al livello 8. Nell’CSS dell’applicazione, mantieni la variabile semantica invece di copiare il blu chiaro in ogni componente. Il canvas scuro è #181818 e il suo contenitore è #242424: sono superfici distinte.
L’anteprima rimane intenzionalmente in modalità chiara. In un’implementazione nativa, imposta theme-mode="dark" sull’elemento radice del documento per selezionare le regole scure pubblicate; circoscrivi separatamente qualsiasi illustrazione di policy personalizzata, invece di ricolorare ogni immagine con un filtro.
js
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
Sistema di progettazione sistema di design TDesign: tipografia densa senza perdere il significato dei campi
Usa tutti i ruoli tipografici
Body medium imposta una dimensione di 14px e un’interlinea di 22px. Title medium aggiunge un peso 600 a 16/24; il titolo piccolo usa 24/32. Sono ruoli distinti: i dati della tabella, le etichette dei pannelli e il titolo della pagina non dovrebbero diventare tutti testo del corpo in grassetto.
La famiglia di font sorgente indica i font di sistema disponibili. Aggiungi un fallback sans-serif appropriato alla tipografia gestita dall’applicazione e verifica insieme le stringhe in cinese e in caratteri latini. Per un percorso di risorsa puoi usare uno stile monospace dell’applicazione, senza presentarlo come un token tipografico di TDesign.
Sistema di progettazione sistema di design TDesign: associa gli alias di dimensione alle regioni effettive
I nomi della spaziatura non sono intercambiabili
La spaziatura orizzontale media dei componenti corrisponde a 12px, mentre il margine extra-large dei componenti corrisponde a 20px. Non tradurre tutti i suffissi semantici usando un’unica scala ipotetica. L’editor usa una spaziatura esterna di 24px e spazi più ridotti tra i campi, così da mantenere raggruppati i controlli.
Nell’anteprima autonoma, alle larghezze ridotte l’editor viene disposto sopra l’elenco delle regole. Questo breakpoint è una scelta applicativa, non una garanzia del framework. Nell’elenco, i percorsi lunghi API vanno a capo invece di allargare l’intera pagina oltre la finestra.
Sistema di progettazione sistema di design TDesign: registra, convalida, poi aggiungi una regola
Mantieni l’errore del campo associato alla relativa chiave
L’istanza Form viene passata al componente Form; ogni FormItem fornisce il nome del campo. Il gestore dell’invio controlla prima validateResult, poi legge i campi raccolti. I controlli dell’applicazione normalizzano le stringhe e rifiutano i percorsi duplicati, così due etichette non possono configurare inavvertitamente lo stesso endpoint di esempio.
Registra nome, percorso e stato di abilitazione usando le chiavi di FormItem.
Prima di aggiungere dati, rifiuta i nomi mancanti e i percorsi che non iniziano con /.
Usa setFields con la stessa chiave del campo per visualizzare l’errore e mantenere i valori digitati, così che possano essere corretti.
Aggiungi un id stabile solo dopo aver superato i controlli e specifica che il risultato è locale.
Sistema di progettazione sistema di design TDesign: mantieni l’identità della riga anche dopo le modifiche e la rimozione
Separa i dati visualizzati dalle celle delle azioni
La tabella riceve il campo id tramite rowKey. La colonna enabled converte un valore Boolean in testo leggibile, anziché mostrare un punto colorato senza etichetta. La colonna delle azioni visualizza un pulsante con il nome della regola, evitando tre controlli «Rimuovi» indistinguibili per le tecnologie assistive.
Per un insieme ridotto di regole, la tabella può rimanere senza paginazione. Se si introduce la paginazione, distinguere lo slicing locale integrato dai dati gestiti dal server prima di impostare disableDataPage. Riutilizzare le posizioni degli array come identificatori non è sicuro se la rimozione ne modifica l’ordine.
name è l’etichetta visibile agli utenti; path identifica la risorsa.
enabled è un dato dell’applicazione e viene visualizzato con testo esplicito.
actions è una colonna personalizzata e non richiede una proprietà corrispondente nei dati archiviati.
Il sistema di progettazione sistema di design TDesign: lo stato locale non è una policy distribuita
Verifica l’editor delle policy come editor
L’anteprima offline usa controlli nativi con etichette, un’area di stato dinamica e un focus visibile da tastiera. Se il nome è vuoto o il percorso è duplicato, l’invio deve mantenere aperto il modulo e indicare il problema concreto. La rimozione di una regola modifica solo l’elenco locale.
Un servizio in produzione richiede comunque convalida lato server, autorizzazioni, gestione dei conflitti, registrazione di controllo e recupero in caso di rifiuto del salvataggio. Questi aspetti vanno progettati attorno all’editor, non simulati con una notifica di successo che dichiara che la policy è stata distribuita.
Integra il pacchetto e mantieni fedele l’esempio del sistema di progettazione sistema di design TDesign
Usa l’esempio nativo per il codice dell’applicazione
L’esempio React importa i componenti effettivi TDesign Form, Input, Switch, Button e Table. L’anteprima incorporata è un’interpretazione autonoma in HTML/CSS, così funziona senza scaricare pacchetti né accedere alla rete. Le verifiche delle interazioni non dimostrano che tutte le dipendenze della libreria siano state compilate nel tuo progetto.
I file dei temi collegati sono le versioni di sviluppo attuali. Verifica la versione installata nel lockfile e confronta i relativi token prima di copiare le personalizzazioni. Questa pagina documenta intenzionalmente i nomi dei ruoli e la provenienza delle fonti, così da poter valutare un successivo aggiornamento del tema invece di nasconderlo dietro una palette esemplificativa.
Esempi di componenti del sistema di progettazione sistema di design TDesign
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione autonoma in HTML/CSS dei token chiari di TDesign e della composizione di Form/Table; non è il runtime nativo di React.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
Le regole esistono solo nella raccolta visibile dell’esempio. La registrazione nativa di Form, le callback di convalida e il rendering di Table sono illustrati separatamente in React.
Editor di regole registrate e rimozione specifica per riga
Form raccoglie il nome, il percorso della risorsa e lo stato di abilitazione. La convalida dell’applicazione intercetta nomi vuoti, percorsi non validi e risorse duplicate prima di aggiungere una riga locale a Table.
I contratti delle colonne di Table e di rowKey sono descritti nella specifica qui sopra.
Questo esempio modifica solo lo stato locale di React; un’etichetta di abilitazione non costituisce una decisione di autorizzazione.
L’esempio di installazione/API è stato verificato rispetto alle fonti ufficiali; la compilazione del pacchetto è distinta dall’anteprima offline testata.
04
Configurazione dell’agente per il sistema di progettazione sistema di design TDesign
Punto di partenza per l’implementazione
Usa l’esempio completo di entry point client qui sopra con un elemento root HTML. Importa tdesign-react/es/style/index.css una sola volta. Blocca le versioni e testa il tutto con il tuo strumento di build prima del rilascio.
bash
npm install tdesign-react react react-dom
Un prompt per il tuo progetto
Prompt per l’agente
Usa Form e Table di tdesign-react per un editor di regole API. Mantieni i ruoli semantici --td-*, le chiavi dei campi registrati, gli id stabili delle righe, una convalida esplicita e messaggi che descrivano con precisione lo stato locale.
05
Fonti e ambito del sistema di progettazione sistema di design TDesign
Riferimento indipendente a OpenDesign. L’anteprima è un’interpretazione offline, non software Tencent né un servizio di autorizzazione distribuito.
