Erstellen Sie einen kompakten Richtlinieneditor für API mit TDesign React: konkreten Theme-Rollen, einer zweipixeligen Größenskala, der Registrierung von Form-Feldern und einer typisierten Table-Komposition.
Eigenständige Interpretation der hellen Tokens von TDesign und der Form/Table-Komposition mit HTML/CSS; nicht die native React-Laufzeitumgebung. · Implementierungsreferenz
02
Designreferenz für das TDesign-Designsystem
TDesign React mit dem aktuellen öffentlichen Theme des develop-Branches und den Komponentenquellen. Die Theme-Werte sind Momentaufnahmen der Quellen und keine Zusage zur Kompatibilität mit einer festgelegten Paketversion. Die eigenständige Vorschau ist eine Interpretation mit HTML; das React-Beispiel verwendet das echte Paket API.
TDesign-Designsystem: Konsolensystem mit klar definierten Implementierungsfamilien
Die Implementierung von React auswählen
TDesign hat separate Framework-Implementierungen. Dieses Beispiel verwendet bewusst tdesign-react und weder ein ähnlich benanntes Vue-Paket noch die mobile Komponentenbibliothek. Das globale Stylesheet gehört zur Integration: Der Import einer Komponente allein stellt weder das gezeigte Layout noch die Theme-Regeln bereit.
Sinnvoll ist eine registrierte Form neben einer strukturierten Table. Name, Ressourcenpfad und Aktiviert sind Datenfelder; das Entfernen einer Zeile ist eine Tabellenaktion. Die pauschale Behauptung, eine API sei jetzt geschützt, wäre falsch, denn dieses Beispiel hat kein Autorisierungs-Backend.
TDesign-Designsystem: Semantische Farben mit tatsächlichen Unterschieden zwischen hellen und dunklen Themes
Der Markenfarbton auf Stufe sieben ist nicht in allen Themes gleich
Das helle Design verwendet für die Markenrolle Stufe sieben, das dunkle Design Stufe acht. Übernimm die semantische Variable in die Anwendungs-CSS, statt das helle Blau in jede Komponente zu kopieren. Die dunkle Arbeitsfläche hat die Farbe #181818, ihr Container die Farbe #242424. Diese Rollen bilden separate Oberflächen.
Die Vorschau bleibt absichtlich im hellen Modus. In einer nativen Implementierung wählen Sie mit theme-mode="dark" am Dokumentstamm die veröffentlichten Regeln für den dunklen Modus aus. Individuelle Richtlinienillustrationen sollten separat abgegrenzt werden, statt jedes Bild mit einem Filter umzufärben.
js
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
TDesign-Designsystem: Dichte Typografie, ohne die Bedeutung der Felder zu verlieren
Verwenden Sie die vollständigen Schriftrollen
Body medium legt eine Schriftgröße von 14px und eine Zeilenhöhe von 22px fest. Title medium ergänzt ein Schriftgewicht von 600 bei 16/24; die kleine Überschrift verwendet 24/32. Diese Rollen erfüllen unterschiedliche Aufgaben: Tabellendaten, Beschriftungen von Bereichen und Seitentitel sollten nicht alle zu fett gesetztem Fließtext werden.
Die Quellschriftfamilie nennt verfügbare Systemschriften. Ergänzen Sie in der anwendungseigenen Typografie eine geeignete serifenlose Ersatzschrift und prüfen Sie chinesische und lateinische Texte gleichzeitig. Für einen Ressourcenpfad kann ein anwendungseigener Monospace-Stil verwendet werden, ohne ihn als TDesign-Typografie-Token auszugeben.
TDesign-Designsystem: Größen-Aliase dem tatsächlichen Bereich zuordnen
Abstandsnamen sind nicht austauschbar
Der horizontale Innenabstand einer Komponente in mittlerer Größe beträgt 12px, der Außenabstand einer Komponente in extragroßer Größe hingegen 20px. Leiten Sie nicht alle semantischen Suffixe anhand einer einzigen vermuteten Skala ab. Der Editor verwendet einen äußeren Innenabstand von 24px und kleinere Abstände zwischen Feldern, damit die Steuerelemente gruppiert bleiben.
In der eigenständigen Vorschau wird der Editor bei schmalen Ansichten über der Regelliste angeordnet. Dieser Breakpoint ist eine Anwendungsentscheidung und keine Garantie des Frameworks. Lange API-Pfade werden in der Liste umgebrochen, statt die gesamte Seite breiter als den Viewport zu machen.
TDesign-Designsystem: Registrieren, validieren und anschließend eine Regel hinzufügen
Die Fehlermeldung dem zugehörigen Feldschlüssel zuordnen
Die Form-Instanz wird an die Form-Komponente übergeben; jedes FormItem enthält den Feldnamen. Der Submit-Handler prüft zuerst validateResult und liest anschließend die erfassten Felder aus. Anwendungsprüfungen normalisieren Zeichenfolgen und weisen doppelte Pfade zurück, damit zwei Bezeichnungen nicht unbemerkt denselben Beispiel-Endpunkt konfigurieren.
Registrieren Sie Name, Pfad und Aktiviert mit FormItem-Schlüsseln.
Weisen Sie fehlende Namen und Pfade zurück, die nicht mit / beginnen, bevor Sie Daten hinzufügen.
Verwenden Sie setFields mit demselben Feldschlüssel, um den Fehler anzuzeigen und die eingegebenen Werte zur Korrektur beizubehalten.
Fügen Sie erst nach bestandener Prüfung eine stabile ID hinzu und weisen Sie darauf hin, dass das Ergebnis lokal ist.
TDesign-Designsystem: Zeilenidentität bei Bearbeitung und Entfernen beibehalten
Anzeigedaten und Aktionszellen getrennt halten
Die Tabelle erhält ihr ID-Feld über rowKey. Die Spalte für den Aktivierungsstatus bildet einen booleschen Wert auf lesbaren Text ab, statt einen unbeschrifteten farbigen Punkt anzuzeigen. Die Aktionsspalte stellt eine Schaltfläche mit dem Namen der Zeile dar, sodass assistive Technologien nicht drei nicht unterscheidbare „Entfernen“-Steuerelemente vorfinden.
Bei einer kleinen Anzahl von Regeln kann die vollständige Tabelle ohne Paginierung angezeigt werden. Wird eine Paginierung eingeführt, sollten Sie zwischen integrierter lokaler Aufteilung und serverseitig gesteuerten Daten unterscheiden, bevor Sie disableDataPage festlegen. Array-Positionen als Identität wiederzuverwenden ist unsicher, da sich ihre Reihenfolge beim Entfernen ändert.
name ist die für Menschen bestimmte Bezeichnung; path ist die Ressourcenidentität.
enabled sind Anwendungsdaten und wird mit eindeutigem Text dargestellt.
actions ist eine benutzerdefinierte Spalte und benötigt keine entsprechende gespeicherte Eigenschaft.
TDesign-Designsystem: Lokaler Zustand ist keine bereitgestellte Richtlinie
Den Richtlinieneditor als Editor testen
Die Offline-Vorschau verwendet native, beschriftete Steuerelemente, einen Live-Statusbereich und eine bei Tastaturnutzung sichtbare Fokusmarkierung. Wird ein leerer Name oder ein doppelter Pfad übermittelt, muss das Formular geöffnet bleiben und das konkrete Problem benennen. Beim Entfernen einer Regel ändert sich nur die lokale Liste.
Ein Produktivdienst benötigt weiterhin serverseitige Validierung, Autorisierung, Konfliktbehandlung, Audit-Protokollierung und eine Möglichkeit, eine abgelehnte Speicherung rückgängig zu machen. Diese Aspekte sollten bei der Gestaltung des Editors berücksichtigt werden, statt sie mit einer Erfolgsmeldung zu simulieren, die eine Bereitstellung behauptet.
TDesign-Designsystem: Paket integrieren und das Beispiel realistisch halten
Für Anwendungscode das native Beispiel verwenden
Das Beispiel für React importiert tatsächliche TDesign-Komponenten: Form, Input, Switch, Button und Table. Die eingebettete Vorschau ist eine in sich geschlossene HTML/CSS-Interpretation, die ohne Paketdownload und Netzwerkzugriff funktioniert. Die Interaktionsprüfungen belegen nicht, dass alle Bibliotheksabhängigkeiten in Ihrem Projekt kompiliert wurden.
Die verknüpften Theme-Dateien sind aktuelle Entwicklungsquellen. Ermitteln Sie die installierte Version anhand einer Lockdatei und gleichen Sie deren Tokens ab, bevor Sie benutzerdefinierte Überschreibungen übernehmen. Diese Seite dokumentiert bewusst Rollennamen und Quellenherkunft, damit sich eine spätere Theme-Änderung bewerten lässt und nicht hinter einer beispielhaften Farbpalette verborgen bleibt.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige HTML/CSS-Interpretation der hellen Tokens von TDesign und der Form-/Table-Komposition; keine native React-Laufzeitumgebung.
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>
Regeln sind nur in der sichtbaren Beispielsammlung vorhanden. Die native Form-Registrierung, Validierungs-Callbacks und Table-Darstellung werden separat in React gezeigt.
Registrierter Regel-Editor mit zeilenspezifischem Entfernen
Form erfasst Name, Ressourcenpfad und Aktivierungsstatus. Die Anwendungsvalidierung erkennt leere Namen, fehlerhafte Pfade und doppelte Ressourcen, bevor eine lokale Table-Zeile hinzugefügt wird.
Die Verträge für Tabellenspalten und rowKey sind oben in der Spezifikation verknüpft.
Dieses Beispiel ändert nur den lokalen Zustand von React; ein aktiviertes Label ist keine Autorisierungsentscheidung.
Das Installations-/API-Beispiel wurde anhand offizieller Quellen geprüft; die Paketkompilierung ist unabhängig von der getesteten Offline-Vorschau.
04
Einrichtung des TDesign-Designsystems für KI-Agenten
Ausgangspunkt für die Implementierung
Verwende das obige vollständige Beispiel für den Client-Einstieg mit einem HTML-Root-Element. Importiere tdesign-react/es/style/index.css genau einmal. Fixiere die Versionen und teste sie vor der Veröffentlichung mit deinem Build-Tool.
bash
npm install tdesign-react react react-dom
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende tdesign-react Form und Table für einen API-Regel-Editor. Bewahre die semantischen --td-*-Rollen, registrierten Feldschlüssel, stabilen Zeilen-IDs, explizite Validierung und wahrheitsgemäße Meldungen zum lokalen Zustand.
05
Quellen und Umfang des TDesign-Designsystems
Unabhängige OpenDesign-Referenz. Die Vorschau ist eine Offline-Interpretation, keine Tencent-Software und kein bereitgestellter Autorisierungsdienst.
