# Sistema di progettazione ServiceTitan Anvil ## Anteprima dell’interfaccia del sistema di progettazione sistema di design ServiceTitan Anvil Cambia l’aspetto chiaro/scuro, seleziona il personale disponibile ed esamina un piano locale sincronizzato. ## Riferimento di progettazione del sistema di progettazione sistema di design ServiceTitan Anvil Esportazioni del tema principale di @servicetitan/hammer-token 3.5.0 e documentazione sulla tematizzazione di Anvil2. ### Coppie semantiche per modalità chiara e scura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | BackgroundColorDefault | light #ffffff / dark #1a1a1a | Superficie principale dell'applicazione. | | BackgroundColorDefaultHover | light #f9f9f9 / dark #292929 | Superficie al passaggio del puntatore. | | BackgroundColorPrimary | light #0265dc / dark #70b1ff | Riempimento dell’azione primaria. | | BackgroundColorPrimaryHover | light #1d4ca3 / dark #9ecaff | Ruolo nativo per lo stato hover primario. | | BackgroundColorPrimaryFaint | light #fafcff / dark #000b19 | Superficie selezionata discreta. | | ForegroundColorSubdued | light #707070 / dark #c4c4c4 | Testo di supporto. | | ForegroundColorOnPrimary | light #ffffff / dark #1a1a1a | Testo abbinato al riempimento primario. | | ForegroundColorPrimary | light #0265dc / dark #70b1ff | Primo piano interattivo. | | BorderColorSubdued | light #e6e6e6 / dark #404040 | Bordi poco accentuati. | | BorderColorPrimary | light #0265dc / dark #9ecaff | Bordo interattivo. | | StatusColorInfo | light #0265dc / dark #70b1ff | Stato informativo. | | StatusColorDanger | light #d62100 / dark #ff5b3d | Attenzione immediata. | | StatusColorSuccess | light #077e50 / dark #0bd085 | Revisione locale completata. | | StatusColorWarning | light #ffbe00 / dark #ffe278 | Avvertenza non critica. | ### Geometria primitiva e valori adattivi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | BreakpointSm | 640px | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | BreakpointMd | 768px | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | BreakpointLg | 1024px | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | BreakpointXl | 1280px | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | BreakpointXxl | 1536px | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | DurationDefault | 200ms | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | DurationInstant | 0ms | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | DurationFast | 100ms | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | DurationSlow | 300ms | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius0 | 0rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius1 | 0.1875rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius2 | 0.375rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius3 | 0.5625rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius4 | 0.75rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius5 | 0.9375rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius6 | 1.125rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius7 | 1.3125rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | | Radius8 | 1.5rem | Primitiva pubblicata; gli alias semantici e dei componenti determinano i ruoli effettivamente applicati. | ### Contratto di override di ThemeProvider | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | theme.semantic | semantic token overrides | Modifica un ruolo come BackgroundColorPrimary. | | theme.component | component token overrides | Restringi la modifica a un ruolo del componente, ad esempio ButtonPrimaryBackgroundColor. | | value | default/light token value | Fornisci il valore per l’aspetto chiaro. | | extensions.appearance.dark.value | dark appearance value | Specifica il valore corrispondente per l’aspetto scuro. | | CSS output | --a2- | ThemeProvider serializza la chiave del token in una variabile CSS. | | Primitive cascade | resolved at build time | L’override di una primitiva durante l’esecuzione non ricalcola gli alias semantici. | ## Guida completa del sistema di progettazione sistema di design ServiceTitan Anvil Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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 Sotto i 768px, la visita proposta segue l’intervento e l’elenco dei tecnici. I controlli mantengono dimensioni adeguate e le etichette vanno a capo in modo naturale. L’anteprima non usa riquadri con altezza fissa, quindi non crea ampie aree vuote sotto contenuti brevi. L’ordine a colonna singola segue la stessa sequenza decisionale del layout più ampio. ## 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. 1. Esegui l’esempio completo del sistema di progettazione HTML. 2. Seleziona il secondo tecnico e verifica che cambino le opzioni dell’orario di inizio. 3. Esamina il piano, poi cambia l’orario e verifica che i messaggi vengano cancellati. 4. 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. ``` Dispatch assignment study
SERVICE OPERATIONS / LOCAL PLANNING STUDY

Assign a service visit

Match a sample job with an available technician.

Job and technician

Sample job #204 · Heating inspection90 minutes · North district · Routine priority
``` Riferimento del codice - Salva come index.html; i browser moderni supportano light-dark(). Non si tratta del runtime nativo di Anvil2. ### Riferimento per l’integrazione ThemeProvider La struttura dell’override semantico è documentata in una voce completa di React. Convalidala rispetto alla versione di Anvil2 installata. ``` import React from 'react'; import { createRoot } from 'react-dom/client'; import { ThemeProvider } from '@servicetitan/anvil2'; const theme = { semantic: { BackgroundColorPrimary: { value: '#7c3aed', extensions: { appearance: { dark: { value: '#a78bfa' } } }, }, }, }; function App() { return (

Theme integration check

Primary role with the provider’s matching foreground role
); } createRoot(document.getElementById('root')).render(); ``` Riferimento del codice - Questo riferimento del provider è stato verificato sulla documentazione ufficiale; l’esempio in esecuzione qui sopra è indipendente HTML. ## 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. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Un prompt per il tuo progetto ``` 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. ``` ## 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. - Temi Livelli dei token, override e valori di aspetto. - Colori Ruoli di stato e indicazioni sui colori per le interazioni. - Spaziatura Scala di spaziatura e integrazione delle utility. - Dimensionamento Fondamenti delle dimensioni. - Architettura della libreria Confini dei pacchetti e delle librerie di Anvil2. ## ServiceTitan Anvil Risorse correlate del sistema di design ### Siemens iX Esamina gli eventi industriali con un vocabolario esplicito dei livelli di gravità, ruoli cromatici adattati al tema e iX Event List API. Questa guida crea un registro locale delle attrezzature senza confondere un record revisionato con un allarme macchina risolto. ### Sprout Social Seeds Esamina i token effettivi di Seeds per colori, spaziatura, tipografia di prodotto e bordi attraverso una coda editoriale completa, con selezione multipla, stati vuoti dopo il filtraggio e annullamento. ### SumUp Circuit Una guida Circuit con token semantici esatti, proprietà di convalida native, un editor completo degli articoli del venditore e un’anteprima illustrata dal lato cliente. - [Riferimento per l’implementazione](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Fonte](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Fonte](https://anvil.servicetitan.com/docs/web/foundations/sizing) - [Riferimento del codice](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Temi Livelli dei token, override e valori di aspetto.](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Colori Ruoli di stato e indicazioni sui colori per le interazioni.](https://anvil.servicetitan.com/docs/web/foundations/colors) - [Spaziatura Scala di spaziatura e integrazione delle utility.](https://anvil.servicetitan.com/docs/web/foundations/spacing) - [Dimensionamento Fondamenti delle dimensioni.](https://anvil.servicetitan.com/docs/web/foundations/sizing) - [Architettura della libreria Confini dei pacchetti e delle librerie di Anvil2.](https://anvil.servicetitan.com/docs/library-architecture)