Rendi concreto Anvil2 con il suo modello di token a tre livelli, valori dei ruoli verificati per temi chiari e scuri e un’interazione completa per l’assegnazione dei servizi, con stati sincronizzati di tecnico, orario e revisione.
Architettura dei token a tre livelli del sistema di progettazione sistema di design ServiceTitan Anvil
Mantieni le primitive al di sotto dei ruoli semantici
Anvil2 separa le primitive grezze, i ruoli semantici e gli alias specifici dei componenti. In genere, un prodotto dovrebbe scegliere il ruolo che descrive il significato nell’interfaccia, invece di copiare una primitiva blu in ogni controllo. La tabella di riferimento include i valori esportati esatti e i corrispondenti valori per la modalità scura, così è possibile esaminare le due varianti insieme quando si cambia tema.
Non aspettarti che gli alias vengano ricalcolati durante l’esecuzione
La guida ufficiale alla tematizzazione specifica che i riferimenti alle primitive vengono risolti durante la compilazione. La modifica di una primitiva tramite un provider durante l’esecuzione non rigenera automaticamente il livello semantico. Per cambiare i colori dell’applicazione, sovrascrivi il ruolo semantico pertinente; per modificare un singolo componente, usa il livello dei componenti. In questo modo si evita un tema modificato solo in parte, con controlli correlati incoerenti.
Aspetto chiaro e scuro del sistema di progettazione sistema di design ServiceTitan Anvil
Abbina le modifiche a testo e sfondo
L’azione primaria usa BackgroundColorPrimary con ForegroundColorOnPrimary. Nell’aspetto chiaro è blu con testo bianco; in quello scuro è blu più chiaro con un’etichetta scura. Cambiare solo il riempimento creerebbe una combinazione incoerente. Lo studio completo HTML usa light-dark() con un selettore color-scheme per mostrare questi valori senza dichiarare di essere ThemeProvider.
Usa le tonalità di stato con un significato esplicito
Anvil2 assegna significati di stato alle famiglie di colori. La revisione locale usa un ruolo di successo, ma specifica comunque con chiarezza cosa è accaduto. Il tecnico non disponibile è indicato con un’etichetta testuale e un pulsante di opzione disabilitato. Nessuna tonalità di verde suggerisce che un intervento sia stato assegnato: l’esempio non si connette mai a un backend di assegnazione.
Assegnazione dei servizi e stati nel sistema di progettazione sistema di design ServiceTitan Anvil
Fai in modo che la disponibilità determini la scelta successiva
Selezionando un tecnico, le opzioni di orario vengono sostituite con la disponibilità fittizia di quella persona. La persona non disponibile rimane visibile, ma non può essere selezionata. Tra i due controlli esiste una dipendenza: quando si cambia il primo, il secondo deve essere reimpostato su un valore valido, anziché mantenere un orario che non corrisponde alla persona scelta.
Separa la pianificazione dall’esecuzione
La revisione dell’assegnazione registra un piano locale e specifica chiaramente che non è stato assegnato alcun intervento. Un flusso di lavoro di produzione richiederebbe controlli delle autorizzazioni, una risposta aggiornata sulla disponibilità e la gestione dei conflitti prima della conferma. L’esempio rende evidente questo limite, offrendo comunque un’interazione completa da provare e adattare.
Densità operativa e leggibilità del sistema di progettazione sistema di design ServiceTitan Anvil
Mantieni il contesto dell’intervento vicino alla selezione
Un riepilogo compatto dell’intervento include attività, durata, zona e priorità. Le opzioni dei tecnici sono disposte in un elenco verticale leggibile e la visita proposta è presentata in un riquadro separato. L’interfaccia usa bordi neutri e colori d’accento discreti, così la selezione e l’azione principale restano facilmente individuabili. Le barre del calendario sono indicate come illustrative; il menu a discesa per l’orario è il riferimento effettivo.
Mantieni l’ordine di lettura sui dispositivi mobili
Integrazione nativa del sistema di progettazione sistema di design ServiceTitan Anvil e alternativa HTML completa
Usa la struttura documentata del provider
ThemeProvider di Anvil2 accetta override dei token semantici e dei componenti, con estensioni per valore e aspetto scuro. La guida include qui sotto un esempio completo del provider, tratto dalla documentazione pubblica. È un riferimento per l’integrazione nativa, distinto dal componente dimostrativo indipendente HTML eseguito localmente.
Non dichiarare un ambiente di esecuzione del pacchetto non verificato
Questa pagina fornisce un’implementazione HTML funzionante e dati dei token verificati. L’esempio del provider nativo è un riferimento d’integrazione separato e non corrisponde all’ambiente di esecuzione mostrato nell’anteprima. Quando adotti i componenti React, installa una versione di Anvil2 compatibile, includi gli stili richiesti e verifica le API dei componenti prima di sostituire i controlli HTML nativi.
Accessibilità e verifica degli stati del sistema di progettazione sistema di design ServiceTitan Anvil
Usa la semantica nativa dei moduli
I tecnici sono rappresentati da pulsanti di opzione nativi con etichetta, l’orario di inizio è un menu a discesa con etichetta e il controllo dell’aspetto espone aria-pressed. Il messaggio di revisione è un’area di stato. La gestione nativa della tastiera del browser consente di selezionare i pulsanti di opzione; lo stile di messa a fuoco visibile è indipendente da quello di selezione o hover.
Verifica le modifiche dopo la conferma
Cambiare tecnico o orario cancella i messaggi di revisione precedenti. Cambiare aspetto mantiene il tecnico e l’orario selezionati, perché una modifica visiva del tema non dovrebbe cancellare un piano. I test dovrebbero coprire entrambe le transizioni, oltre alla selezione disabilitata e agli overflow sugli schermi stretti, anziché verificare solo che sia possibile fare clic su un pulsante.
Passaggio di consegne all’agente e implementazione del sistema di progettazione sistema di design ServiceTitan Anvil
Inizia dal modello completo degli stati
Salva ed esegui l’esempio HTML completo per esaminarne il comportamento. Le coppie di valori chiaro/scuro derivate dai token sono visibili nella parte superiore di CSS e i dati di disponibilità definiti nell’esempio sono visibili nello script. Un’implementazione nativa di React può mantenere le stesse transizioni di stato sostituendo i controlli con componenti Anvil2 verificati.
Esegui l’esempio completo del sistema di progettazione HTML.
Seleziona il secondo tecnico e verifica che cambino le opzioni dell’orario di inizio.
Esamina il piano, poi cambia l’orario e verifica che i messaggi vengano cancellati.
Cambia aspetto e verifica che la selezione corrente venga mantenuta.
Specifica quali dati richiedono una fonte reale
Chiedi all’agente di mantenere l’elenco degli orari dipendente, il membro dello staff disabilitato, l’invalidazione della revisione e il comportamento dell’aspetto. Sostituisci l’incarico e il membro dello staff fittizi solo quando è disponibile un contratto dati reale. Non trasformare la revisione locale in un messaggio di successo limitandoti a cambiare l’etichetta del pulsante.
Verifica la disponibilità prima di un intervento reale.
Mantieni separati gli override semantici e quelli dei componenti.
Verifica entrambe le combinazioni di primo piano e sfondo, in modalità chiara e scura.
ServiceTitan Anvil Esempi di componenti del sistema di design
Esempio completo di assegnazione locale
Originale HTML/CSS/JavaScript, con aspetti derivati dai token e stato del modulo dipendente.
Questo riferimento del provider è stato verificato sulla documentazione ufficiale; l’esempio in esecuzione qui sopra è indipendente HTML.
04
ServiceTitan Anvil Configurazione dell’agente AI del sistema di design
Punto di partenza per l’implementazione
Per l’esempio eseguito non è necessario alcun pacchetto Anvil2. L’esempio separato ThemeProvider richiede un’installazione nativa compatibile.
sh
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
Un prompt per il tuo progetto
Prompt per l’agente
Crea un’interfaccia per l’assegnazione dei servizi usando i ruoli semantici di Anvil2. Mantieni le coppie di colori in primo piano per chiaro e scuro, le opzioni orarie in base al tecnico, il personale non disponibile disabilitato e l’invalidazione della revisione, come nell’esempio completo. Scegli esplicitamente tra l’installazione originale HTML e un’installazione di Anvil2 verificata React. Non dichiarare mai un’assegnazione senza una risposta dal backend.
05
Fonti e ambito del sistema di design ServiceTitan Anvil
Una guida OpenDesign ad Anvil2 ServiceTitan. I valori dei token sono estratti da Hammer token 3.5.0, disponibile al pubblico. L’esempio eseguibile usa HTML originale, non un runtime React di Anvil2; tutti i tecnici e le disponibilità sono fittizi.
