Erstellen Sie eine schrittweise Workspace-Einrichtung mit den empfohlenen grundlegenden Steps von Semi, einem gesteuerten Input und Switch, echten Theme-Tokens und einer expliziten Entscheidung zwischen den Paketen React 18 und React 19.
Validieren Sie einen Namen, wählen Sie eine Digest-Einstellung, kehren Sie zu vorherigen Schritten zurück und prüfen Sie die abschließende lokale Konfiguration.
Offline-Interpretation von HTML-Theme-Skalierungen und dem Verhalten von Steps/Input/Switch. Das native React-Beispiel ist davon unabhängig. · Implementierungsreferenz
02
Semi Design-Designsystem: Designreferenz
Offizielle Semi-Dokumentation und SCSS-Snapshot des Standard-Themes. Namen mit $ sind Sass-Konstanten zur Compile-Zeit; Namen mit --semi-* sind CSS-Variablen zur Laufzeit. Die Daten des Anwendungsablaufs sind eigens erstellt.
Semi Design-Designsystem: Wählen Sie das Paket für die tatsächliche Hauptversion von React
Das Suffix ändert die Integration
Im aktuellen Quick Start von Semi wird das Paket für React 19 vom Paket für frühere React-Versionen unterschieden. Dieses Beispiel verwendet ausdrücklich React 18 und @douyinfe/semi-ui. Für den Wechsel zu React 19 sind die dokumentierten Importe aus @douyinfe/semi-ui-19 und die entsprechende Abhängigkeitsauswahl erforderlich.
Unterstützte Bundler laden zugehörige CSS aus dem Komponenten-JavaScript. Änderungen zur Compile-Zeit, etwa ein eigenes Präfix, die Theme-Kompilierung oder CSS-Ebenen, erfordern separate Überlegungen zu den Werkzeugen. Leiten Sie aus einem einfachen Importbeispiel nicht ab, dass jede Theme-Anpassung ohne Konfiguration funktioniert.
Semi Design-Designsystem: Benannte Sass-Skalierungen machen Dichte konkret
Verwenden Sie die veröffentlichten Steuerelementhöhen von 24, 32 und 40px
Die drei Konstanten für Steuerelementhöhen in Semi sind 24, 32 und 40px. Die benannten Abstände reichen von 2 bis 40px und folgen einer ungleichmäßigen Abstufung. Ein Standardfeld im Assistenten kann mit 12px Abstand zum Hilfetext und 24px Abstand zum nächsten Abschnitt gestaltet werden, ohne ein neues Abstandsmodell einzuführen.
Diese Werte sind Sass-Konstanten und keine automatisch verfügbaren Laufzeitvariablen. Das Muster verwendet ihre aufgelösten Maße in einem eigens erstellten Seiten-CSS. Dieser Unterschied ist wichtig, wenn ein Entwickler ein Layout zur Laufzeit mit einem Theme versehen möchte, statt ein Stylesheet neu zu erstellen.
Semi Design-Designsystem: Verwenden Sie die passenden Größen- und Zeilenhöhenpaare
Fließtext und Überschriften haben einen unterschiedlichen Rhythmus
Das reguläre Mixin kombiniert 14px Text mit 20px Zeilenhöhe; das kleine Mixin kombiniert 12px mit 16px. Header 3 hat die Maße 24/32, Header 1 die Maße 32/44. Für einen kurzen Titel im Assistenten eignet sich die erste Variante; die zweite bleibt einer stärkeren Seitenhierarchie vorbehalten.
Die Quellschriftfamilie beginnt mit Inter, gefolgt von Plattform- und CJK-Fallbacks. Die Offline-Vorschau verwendet einen verfügbaren Systemschriftstapel und behauptet nicht, eine bestimmte Schrift heruntergeladen zu haben. Halten Sie die Schrittnamen kurz, damit sie auch beim Umbruch der Schrittleiste in einem schmalen Ansichtsfenster verständlich bleiben.
Semi Design Designsystem: Theme-Rollen und Palettenkanäle sind getrennt
Aufgelöste Rollen in der Anwendung verwenden CSS
Die primäre Rolle umschließt eine Variable für den Palettenkanal mit rgba. Für eine gewöhnliche Farbeigenschaft eignet sich --semi-color-primary; eine bloße Liste von Kanalwerten wie --semi-blue-5 ist keine vollständige CSS-Farbe. In hellen und dunklen Paletten ändern sich diese Kanalwerte.
Auch Textrollen verwenden Deckkraft. Sekundärtext ist kein beliebiger hellerer Hexadezimalwert, und deaktivierter Text sollte nicht für wichtige Hilfetexte wiederverwendet werden. Der Assistent hält seine Abschlussmeldung neutral, da das Vorbereiten der Konfiguration kein aktives Konto erstellt.
Semi Design Designsystem: Basic Steps zeigt den Fortschritt an, nicht die Möglichkeit, die Validierung zu überspringen
Die Anwendung steuert die Übergangsregeln
Semi empfiehlt für eine einfache Schrittleiste type="basic". current beginnt bei null; der aktuelle Schritt kann den Status process, error oder einen anderen unterstützten Status erhalten. Das ältere Standard-Design ist in der Dokumentation als veraltet gekennzeichnet.
Das Beispiel führt bewusst über die Schaltflächen „Weiter“ und „Zurück“ durch die Schritte. Es verknüpft nicht jeden Schrittklick mit setCurrent, denn so könnte man bei leerem Namen zur Überprüfung gelangen. Die separat dokumentierte Darstellung nav ist nicht interaktiv und sollte nicht mit einer Navigation durch die Schritte des Assistenten verwechselt werden.
Den Namen validieren, bevor der erste Schritt verlassen wird.
Den ausgewählten booleschen Wert für den Wochenrückblick beim Zurückgehen beibehalten.
Auf der Überprüfungsseite alle Einstellungen anzeigen.
Eine lokale Konfiguration vorbereiten, ohne zu behaupten, dass nun ein Konto oder Abonnement besteht.
Semi Design Designsystem: Die visuelle Validierung validiert nicht den Wert
Den Callback mit dem Wert an erster Stelle korrekt verwenden
Semi Input ruft onChange mit dem Wert vor dem Ereignis auf. Das Beispiel kann setName daher direkt übergeben. validateStatus ändert lediglich die Darstellung; die Prüfung auf einen leeren Namen ist Anwendungslogik und benötigt eine sichtbare Erklärung.
Bei Text, der Live-Abfragen auslöst, können Callbacks während der Eingabemethodeingabe bis zur Bestätigung durch IME-Komposition zurückgestellt werden. Das Feld für den Arbeitsbereichsnamen löst keine Live-Abfrage aus. Daher lässt das Beispiel dieses optionale Verhalten aus, statt es als allgemeine Anforderung darzustellen.
Semi Design Designsystem: Eine Einstellung bleibt neben ihrem Schalter verständlich
Den Status im übergeordneten Element speichern
Switch verwendet checked und einen onChange-Callback, der zuerst einen booleschen Wert übergibt. Die Beschriftung sollte die Einstellung benennen, etwa „Wöchentlicher Rückblick“, während der umgebende Text ihre Bedeutung erklärt. Lange Texte für aktivierte und deaktivierte Zustände gehören außerhalb des kleinen Steuerelements; kleine Schalter unterstützen diese Texte innerhalb des Steuerelements nicht.
Einen eindeutigen zugänglichen Namen verwenden, der die Einstellung bezeichnet.
Den Einstellungswert beim Wechsel zwischen den Schritten des Assistenten beibehalten.
Den endgültigen Wert auf der Überprüfungsseite als normalen Text anzeigen.
Semi Design Designsystem: Button-Typ und Theme beantworten unterschiedliche Fragen
Semantische Rolle oder visuelle Gestaltung
Bei Semi Button legt type eine Rolle wie primary oder danger fest. theme bestimmt die visuelle Gestaltung: light, solid, borderless oder outline. Das Beispiel verwendet eine hervorgehobene primäre Aktion „Weiter“ und eine zurückhaltendere Aktion „Zurück“, statt danger zu missbrauchen, um eine Schaltfläche stärker hervorzuheben.
Das Offline-Beispiel verschiebt den Fokus beim Schrittwechsel auf die Überschrift des neuen Abschnitts und bei fehlgeschlagener Validierung zurück zum ungültigen Feld. Sein mobiles Layout und die Tastaturreihenfolge werden unabhängig vom quellgeprüften nativen React-Beispiel getestet.
Das vollständige Dokument als index.html speichern und in einem Browser öffnen. Offline-HTML-Interpretation der Semi-Theme-Skalen und des Verhaltens von Steps/Input/Switch. Das native React-Beispiel ist separat.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Semi workspace setup interpretation</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#1c1f23;font:14px/20px Inter,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;min-height:32px;border:0;border-radius:3px;padding:6px 16px;background:rgba(46,50,56,.05);color:inherit}button.primary{background:#0064fa;color:white}button.primary:hover{background:#0062d6}button:focus-visible,input:focus-visible{outline:2px solid #0064fa;outline-offset:3px}header{padding:20px 32px;border-bottom:1px solid rgba(28,31,35,.08);background:white;display:flex;justify-content:space-between;gap:16px}header strong{font-size:16px}header span,.muted{color:#63656a}main{max-width:950px;margin:32px auto;padding:0 24px}h1{font-size:24px;line-height:32px;font-weight:600;margin:0 0 8px}h2{font-size:20px;line-height:28px;font-weight:600;margin:0 0 12px}p{margin:0 0 16px}.card{background:white;border:1px solid rgba(28,31,35,.08);border-radius:12px;overflow:hidden;margin-top:24px}.steps{padding:24px;display:flex;list-style:none;margin:0;border-bottom:1px solid rgba(28,31,35,.08);gap:12px}.steps li{flex:1;display:flex;align-items:center;gap:8px;color:#63656a;font-size:12px}.steps b{height:24px;width:24px;border-radius:50%;display:grid;place-items:center;background:#eee;flex-shrink:0}.steps [aria-current]{color:#0064fa}.steps [aria-current] b{background:#0064fa;color:white}.steps .done b{background:#eaf5ff;color:#0064fa}.workspace{display:grid;grid-template-columns:1fr 240px;min-height:300px}.panel{padding:32px}.illustration{background:#eaf5ff;display:flex;flex-direction:column;justify-content:center;padding:24px;gap:12px}.mini{background:white;box-shadow:0 6px 20px #0064fa12;border-radius:6px;padding:16px;transform:rotate(-3deg)}.mini i{display:block;height:8px;background:#eaf5ff;width:80%;margin:8px 0;border-radius:3px}.mini i:first-child{background:#0064fa;width:36%}.mini i:nth-child(3){width:55%}.mini:last-child{transform:rotate(4deg);margin-left:20px}.mini span{font-size:12px;color:#63656a}.form-label{display:block;font-weight:600;margin:20px 0 8px}input[type=text]{height:32px;background:rgba(46,50,56,.05);border:1px solid transparent;border-radius:3px;padding:5px 12px;width:100%}input[aria-invalid=true]{border-color:#d52515}.error{color:#b21b13;min-height:20px;font-size:12px;margin:8px 0}.preference{border:1px solid #eee;border-radius:6px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}.preference p{margin:4px 0 0;font-size:12px}.toggle{appearance:none;width:40px;height:24px;border-radius:999px;background:#bbb;position:relative;cursor:pointer;flex-shrink:0}.toggle:checked{background:#0064fa}.toggle:before{content:'';position:absolute;left:3px;top:3px;background:white;border-radius:50%;width:18px;height:18px}.toggle:checked:before{left:19px}footer{display:flex;justify-content:space-between;padding:20px 32px;border-top:1px solid rgba(28,31,35,.08)}dl{margin:20px 0}dt{color:#63656a;font-size:12px}dd{margin:4px 0 20px;font-size:16px;font-weight:600;overflow-wrap:anywhere}#result{margin-top:16px;border-radius:6px;background:#eaf5ff;padding:16px}#result:empty{display:none}.boundary{font-size:12px;margin-top:20px;color:#63656a}h2:focus{outline:none}@media(max-width:600px){header{padding:16px}header span{display:none}main{margin:24px auto;padding:0 16px}.workspace{grid-template-columns:1fr}.illustration{display:none}.steps{padding:16px;gap:8px}.steps li{flex-direction:column;align-items:flex-start;gap:4px}.panel{padding:24px 20px}footer{padding:16px 20px;gap:12px}footer button{padding:6px 12px}}
</style><header><strong>◒ Workspace</strong><span>Configuration studio</span></header><main><h1>Make room for your team</h1><p class="muted">Three steps to prepare a workspace configuration.</p><div class="card"><ol class="steps" aria-label="Setup progress"><li><b>1</b>Name workspace</li><li><b>2</b>Choose updates</li><li><b>3</b>Review settings</li></ol><div class="workspace"><section class="panel" id="panel"></section><aside class="illustration" aria-hidden="true"><div class="mini"><i></i><i></i><i></i><span>A place for shared ideas</span></div><div class="mini"><i></i><i></i><i></i><span>Updates on your terms</span></div></aside></div><footer><button id="previous">Previous</button><button class="primary" id="next">Continue</button></footer></div><div id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Semi’s theme and components. This example stores a draft only in memory; it does not create an account.</p></main><script>
let step=0,name='',digest=true;const panel=document.querySelector('#panel'),next=document.querySelector('#next'),previous=document.querySelector('#previous'),result=document.querySelector('#result');function render(focus=false){document.querySelectorAll('.steps li').forEach((el,i)=>{el.className=i<step?'done':'';el.removeAttribute('aria-current');if(i===step)el.setAttribute('aria-current','step')});previous.style.visibility=step?'visible':'hidden';next.textContent=step===2?'Prepare configuration':'Continue';if(step===0){panel.innerHTML='<h2 tabindex="-1">Name your workspace</h2><p class="muted">Choose a name your team will recognize.</p><label class="form-label" for="name">Workspace name</label><input id="name" type="text" placeholder="e.g. Studio North" autocomplete="organization" aria-describedby="help error"><p id="error" class="error" role="alert"></p><p id="help" class="muted">You can revisit this step before preparing the configuration.</p>';let input=document.querySelector('#name');input.value=name;input.oninput=()=>{name=input.value;input.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};input.onkeydown=e=>{if(e.key==='Enter')next.click()}}else if(step===1){panel.innerHTML='<h2 tabindex="-1">Choose your updates</h2><p class="muted">Keep the weekly digest in your configuration, or switch it off.</p><label class="preference"><span><strong>Weekly digest</strong><p class="muted">A weekly summary of workspace activity.</p></span><input class="toggle" type="checkbox" role="switch" aria-label="Weekly digest" id="digest"></label>';let input=document.querySelector('#digest');input.checked=digest;input.onchange=()=>{digest=input.checked;result.textContent=''}}else{panel.innerHTML='<h2 tabindex="-1">Review settings</h2><p class="muted">Check the draft before preparing it.</p><dl><dt>Workspace name</dt><dd id="review-name"></dd><dt>Weekly digest</dt><dd id="review-digest"></dd></dl>';document.querySelector('#review-name').textContent=name.trim();document.querySelector('#review-digest').textContent=digest?'Enabled':'Disabled'}if(focus)panel.querySelector('h2').focus()}
next.onclick=()=>{if(step===0&&!name.trim()){document.querySelector('#error').textContent='Enter a workspace name.';let input=document.querySelector('#name');input.setAttribute('aria-invalid','true');input.focus();return}if(step<2){step++;render(true)}else result.textContent='Configuration prepared locally: '+name.trim()+' · Weekly digest '+(digest?'enabled':'disabled')+'. No account created.'};previous.onclick=()=>{step=Math.max(0,step-1);result.textContent='';render(true)};render();
</script></html>
„Weiter“ validiert den Arbeitsbereichsnamen, bevor der Assistent zum nächsten Schritt wechselt. Dieses Dokument interpretiert die Schritte; der separate Eintrag React beschreibt die Paketgrenze zwischen React 18 und 19.
Ein validierter Konfigurationsassistent mit drei Schritten
Basic Steps verfolgt den aktuellen Fortschritt; Input und Switch behalten Werte beim Seitenwechsel bei. „Weiter“ validiert den Namen, und die abschließende Aktion bereitet lediglich eine lokale Konfiguration vor.
jsx
// React 18 example. React 19 uses @douyinfe/semi-ui-19 instead.
// npm install react@18 react-dom@18 @douyinfe/semi-ui
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Steps,Input,Switch,Button} from '@douyinfe/semi-ui';
function WorkspaceSetup(){
const [current,setCurrent]=useState(0),[name,setName]=useState('');
const [digest,setDigest]=useState(true),[error,setError]=useState('');
const [prepared,setPrepared]=useState(false);
function next(){
if(current===0&&!name.trim()){setError('Enter a workspace name.');return;}
setError('');setCurrent(n=>Math.min(2,n+1));
}
return <main style={{maxWidth:760,margin:'auto',padding:24,color:'var(--semi-color-text-0)'}}>
<h1>Workspace setup</h1>
<Steps type="basic" current={current} status={error?'error':'process'}>
<Steps.Step title="Name workspace"/>
<Steps.Step title="Choose updates"/>
<Steps.Step title="Review settings"/>
</Steps>
<section style={{padding:'24px 0'}}>
{current===0&&<><label htmlFor="workspace-name">Workspace name</label>
<Input id="workspace-name" value={name} onChange={setName}
validateStatus={error?'error':'default'} aria-invalid={!!error} aria-describedby="error" />
<p id="error" role="alert">{error}</p></>}
{current===1&&<><h2>Weekly digest</h2><p>Include a weekly activity summary in the local configuration.</p>
<Switch checked={digest} onChange={setDigest} aria-label="Weekly digest"/></>}
{current===2&&<><h2>Review your draft</h2><dl><dt>Workspace</dt><dd>{name}</dd>
<dt>Weekly digest</dt><dd>{digest?'Enabled':'Disabled'}</dd></dl>
<p>No workspace or notification subscription is created.</p></>}
</section>
{current>0&&<Button onClick={()=>{setCurrent(n=>n-1);setPrepared(false);}}>Previous</Button>}
{current<2 ? <Button theme="solid" type="primary" onClick={next}>Continue</Button> :
<Button theme="solid" type="primary" onClick={()=>setPrepared(true)}>Prepare configuration</Button>}
<p role="status">{prepared?'Configuration prepared locally. No account created.':''}</p>
</main>;
}
createRoot(document.getElementById('root')).render(<WorkspaceSetup />);
Das Beispiel für React 18 installiert absichtlich @douyinfe/semi-ui; für React 19 ist das in Quick Start dokumentierte Paket -19 erforderlich.
Semi-Komponenten-JavaScript importieren ihre zugehörigen CSS in unterstützten Bundlern. Bei der Standardeinrichtung ist kein erfundener Schritt zum Einbinden eines globalen Stylesheets erforderlich.
Das eingebettete HTML-Beispiel verschiebt den Fokus ausdrücklich. Dieses Verhalten sollte bei der Umsetzung nativer Komponenten im Produkt ebenfalls berücksichtigt werden.
04
Semi Design Designsystem: Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Einen der beiden Abhängigkeitszweige auswählen. Das Beispiel verwendet React 18. Laut aktuellem Quick Start importieren Komponenten-JavaScript in Vite/Webpack/Rspack ihre zugehörigen CSS; für die Theme-Kompilierung sind zusätzliche Werkzeuge erforderlich.
bash
npm install react@18 react-dom@18 @douyinfe/semi-ui
# For a React 19 application instead:
# npm install react@19 react-dom@19 @douyinfe/semi-ui-19
Ein Prompt für dein Projekt
Agenten-Prompt
Semi Basic Steps mit einem kontrollierten Input und Switch verwenden. Das React-Paket muss zur Hauptversion des installierten React passen. Vor dem Fortfahren validieren, die Daten beim Zurückgehen beibehalten und eine abschließende lokale Konfiguration anzeigen, ohne fälschlich die Erstellung eines Kontos zu behaupten.
05
Semi Design Designsystem: Quellen und Umfang
Unabhängige OpenDesign-Referenz. Ursprüngliches Arbeitsbereichsbeispiel; es wird weder ein Konto noch ein Benachrichtigungsabonnement erstellt.
