83.3K+İndir
Hizmet Yönetimi · Yeni Kaynak

ServiceTitan Anvil Tasarım Sistemi.

Anvil2’yi üç katmanlı belirteç modeli, doğrulanmış açık/koyu rol değerleri ve teknisyen, saat ve inceleme durumlarını eşzamanlı güncelleyen eksiksiz bir hizmet atama etkileşimiyle somutlaştırın.

OpenDesign’ı indirin DESIGN.md dosyasını indir
OpenDesign Kılavuzu7 Bölüm38 Referans KaydıÖzgün Uygulama Kılavuzu
01

ServiceTitan Anvil Tasarım Sistemi Arayüz Önizlemesi

Açık/koyu görünümü değiştirin, mevcut personeli seçin ve eşzamanlı yerel planı inceleyin.

Bir hizmet ziyareti için teknisyen eşleştirinÖrneğin Tamamını Aç
Hammer token 3.5.0 rol değerlerini kullanan özgün HTML. · Uygulama başvurusu
02

ServiceTitan Anvil Tasarım Sistemi Tasarım Referansı

@servicetitan/hammer-token 3.5.0 çekirdek tema dışa aktarımları ve Anvil2 tema oluşturma belgeleri.

Anlamsal açık/koyu eşleşmeleri

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
BackgroundColorDefaultlight #ffffff / dark #1a1a1aAna uygulama yüzeyi.
BackgroundColorDefaultHoverlight #f9f9f9 / dark #292929Üzerine gelme yüzeyi.
BackgroundColorPrimarylight #0265dc / dark #70b1ffBirincil eylem dolgusu.
BackgroundColorPrimaryHoverlight #1d4ca3 / dark #9ecaffYerel birincil üzerine gelme rolü.
BackgroundColorPrimaryFaintlight #fafcff / dark #000b19Seçili, düşük vurgulu yüzey.
ForegroundColorSubduedlight #707070 / dark #c4c4c4Yardımcı metin.
ForegroundColorOnPrimarylight #ffffff / dark #1a1a1aBirincil dolguyla eşleşen metin.
ForegroundColorPrimarylight #0265dc / dark #70b1ffEtkileşimli ön plan.
BorderColorSubduedlight #e6e6e6 / dark #404040Düşük vurgulu sınırlar.
BorderColorPrimarylight #0265dc / dark #9ecaffEtkileşimli sınır.
StatusColorInfolight #0265dc / dark #70b1ffBilgilendirici durum.
StatusColorDangerlight #d62100 / dark #ff5b3dAcil müdahale gerektiren durum.
StatusColorSuccesslight #077e50 / dark #0bd085Yerel inceleme tamamlandı.
StatusColorWarninglight #ffbe00 / dark #ffe278Kritik olmayan uyarı.

İlkel geometri ve duyarlı değerler

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
BreakpointSm640pxYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
BreakpointMd768pxYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
BreakpointLg1024pxYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
BreakpointXl1280pxYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
BreakpointXxl1536pxYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
DurationDefault200msYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
DurationInstant0msYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
DurationFast100msYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
DurationSlow300msYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius00remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius10.1875remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius20.375remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius30.5625remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius40.75remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius50.9375remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius61.125remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius71.3125remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.
Radius81.5remYayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler.

ThemeProvider geçersiz kılma sözleşmesi

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
theme.semanticsemantic token overridesBackgroundColorPrimary gibi bir rolü değiştirin.
theme.componentcomponent token overridesDeğişikliği ButtonPrimaryBackgroundColor gibi bir bileşen rolüyle sınırlandırın.
valuedefault/light token valueAçık görünüm değerini sağlayın.
extensions.appearance.dark.valuedark appearance valueEşleşen koyu görünümü belirtin.
CSS output--a2-<kebab-case-name>ThemeProvider, belirteç anahtarını CSS değişkenine dönüştürür.
Primitive cascaderesolved at build timeÇalışma zamanında bir ilkeli geçersiz kılmak, anlamsal takma adları yeniden hesaplamaz.
03

ServiceTitan Anvil Tasarım Sistemi Tam Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

DESIGN-servicetitan-anvil.md

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

Kılavuzu İndir

ServiceTitan Anvil Tasarım Sistemi Üç Katmanlı Belirteç Mimarisi

İlkel değerleri anlamsal rollerin altında tutun

Anvil2; ham ilkelleri, anlamsal rolleri ve bileşene özgü takma adları birbirinden ayırır. Bir ürün genellikle her denetimde ilkel bir maviyi kullanmak yerine arayüzdeki anlamı açıklayan rolü seçmelidir. Referans tablosunda dışa aktarılan kesin değerler ve bunların koyu görünümdeki karşılıkları yer alır; böylece tema değişikliği eşleşmiş değerler olarak incelenebilir.

Bu OpenDesign kılavuzundan

Çalışma zamanında takma adların yeniden hesaplanmasını beklemeyin

Resmî tema oluşturma kılavuzunda, ilkel başvuruların derleme sırasında çözümlendiği belirtilir. Bir ilkel değerin çalışma zamanı sağlayıcısı üzerinden değiştirilmesi anlamsal katmanı otomatik olarak yeniden oluşturmaz. Uygulamanın renklerini değiştirmek için ilgili anlamsal rolü, tek bir bileşeni değiştirmek içinse bileşen katmanını geçersiz kılın. Böylece temanın yalnızca bir kısmının değişip ilişkili denetimlerin tutarsız kalması önlenir.

ServiceTitan Anvil Tasarım Sistemi Açık ve Koyu Görünüm

Ön plan ve arka plan değişikliklerini eşleştirin

Birincil eylem, BackgroundColorPrimary değerini ForegroundColorOnPrimary ile birlikte kullanır. Açık görünümde mavi arka plan üzerinde beyaz metin, koyu görünümdeyse daha açık mavi arka plan üzerinde koyu renkli bir etiket kullanılır. Yalnızca dolguyu değiştirmek tutarsız bir eşleşmeye yol açar. Tam HTML çalışması, ThemeProvider olduğu iddiasında bulunmadan bu değerleri göstermek için color-scheme anahtarıyla birlikte light-dark() kullanır.

Durum tonlarını yazılı bir anlamla birlikte kullanın

Anvil2, renk ailelerine durum anlamları atar. Yerel incelemede bir başarı rolü kullanılır, ancak tam olarak ne olduğu yine de belirtilir. Müsait olmayan teknisyen metinle etiketlenir ve devre dışı bırakılmış bir radyo düğmesiyle gösterilir. Hizmet ziyaretinin görevlendirildiğini ima etmek için yeşil ton kullanılmaz; örnek hiçbir zaman bir görevlendirme arka ucuna bağlanmaz.

ServiceTitan Anvil Tasarım Sistemi Hizmet Ataması ve Durum

Müsaitlik, sonraki seçimi belirlesin

Bir teknisyen seçildiğinde başlangıç saati seçenekleri o kişinin kurgusal müsaitliğine göre güncellenir. Müsait olmayan kişi görünür kalır, ancak seçilemez. Bu, iki denetim arasındaki bir bağımlılıktır; bu nedenle ilk denetimin değişmesi, ikinci denetimin başka bir kişiye ait bir saatte kalması yerine geçerli bir değerle sıfırlanmasını gerektirir.

Planlamayı uygulamadan ayırın

Atamanın incelenmesi yerel bir plan kaydeder ve herhangi bir ziyaretin görevlendirilmediğini açıkça belirtir. Üretim iş akışında, işlemi tamamlamadan önce izin kontrolleri, güncel bir program yanıtı ve çakışma yönetimi gerekir. Örnek, çalıştırılıp uyarlanabilecek eksiksiz bir etkileşim sunarken bu sınırı da görünür tutar.

ServiceTitan Anvil Tasarım Sistemi Operasyonel Yoğunluk ve Okunabilirlik

İş bağlamını seçime yakın tutun

Kompakt bir iş özeti; görevi, süreyi, bölgeyi ve önceliği içerir. Teknisyen seçenekleri okunabilir bir dikey liste oluşturur; önerilen ziyaret ise ayrı bir panelde gösterilir. Arayüzde nötr sınırlar ve ölçülü vurgu renkleri kullanılır, böylece seçim ve birincil eylem kolayca fark edilir. Program çubuklarının açıklayıcı örnek olduğu etiketlenmiştir; esas alınması gereken gerçek zaman seçicisidir.

Mobilde okuma sırasını koruyun

ServiceTitan Anvil Tasarım Sistemi Yerel Entegrasyon ve Tam HTML Alternatifi

Belgelenmiş sağlayıcı yapısını kullanın

Anvil2 ThemeProvider, value ve dark görünüm uzantılarını içeren anlamsal ve bileşen belirteci geçersiz kılmalarını kabul eder. Kılavuzda, herkese açık belgelerden alınmış eksiksiz bir sağlayıcı örneği aşağıda yer alır. Bu, yerel olarak çalıştırılan bağımsız HTML örneğinden farklı, yerel bir entegrasyon referansıdır.

Doğrulanmamış bir paket çalışma zamanı olduğunu iddia etmeyin

Bu sayfada çalışan bir HTML uygulaması ve doğrulanmış belirteç verileri sunulur. Yerel sağlayıcı örneği ayrı bir entegrasyon referansıdır; önizlemede gösterilen çalışma zamanı değildir. React bileşenlerini kullanmaya başlarken birbiriyle uyumlu bir Anvil2 sürümü kurun, gerekli stilleri ekleyin ve yerel HTML denetimlerini değiştirmeden önce bileşen API'lerini doğrulayın.

ServiceTitan Anvil Tasarım Sistemi Erişilebilirlik ve Durum Doğrulaması

Yerel form anlambilimini kullanın

Teknisyenler yerel radyo düğmeleriyle etiketlenir, başlangıç saati etiketli bir seçim alanıdır ve görünüm denetimi aria-pressed özelliğini sunar. İnceleme mesajı bir durum bölgesidir. Radyo düğmesi seçimini tarayıcının yerel klavye modeli yönetir; görünür odak stili ise seçim veya üzerine gelme stilinden bağımsız kalır.

Onaydan sonra değişiklikleri denetleyin

Teknisyen veya saat değiştirildiğinde eski inceleme geri bildirimi temizlenir. Görünüm değiştirildiğinde seçili teknisyen ve saat korunur; çünkü görsel temanın değişmesi bir planı silmemelidir. Testlerde yalnızca bir düğmenin tıklanabildiğini denetlemek yerine, devre dışı seçimin ve dar ekranda taşmanın yanı sıra her iki geçiş de ele alınmalıdır.

ServiceTitan Anvil Tasarım Sistemi Araca Devir ve Uygulama

Tam durum modeliyle başlayın

Davranışı incelemek için HTML örneğinin tamamını kaydedip çalıştırın. Belirteçlerden türetilen açık/koyu eşleşmeleri CSS üst kısmında, tanımlı müsaitlik verileri ise betikte görülebilir. Yerel bir React uygulaması, doğrulanmış Anvil2 denetimlerini kullanırken aynı durum geçişlerini koruyabilir.

  1. HTML örneğinin tamamını çalıştırın.
  2. İkinci teknisyeni seçin ve başlangıç saati seçeneklerinin değiştiğini doğrulayın.
  3. Planı inceleyin, ardından saati değiştirip geri bildirimin temizlendiğini doğrulayın.
  4. Görünümü değiştirin ve mevcut seçimin korunduğunu doğrulayın.

Gerçek veri gerektirenleri belirtin

Temsilciye, bağımlı zaman listesini, devre dışı personel üyesini, incelemenin geçersiz kılınmasını ve görünüm davranışını korumasını söyleyin. Gerçek bir veri sözleşmesi olmadığı sürece örnek işi ve personeli değiştirmeyin. Yalnızca düğme etiketini değiştirerek yerel incelemeyi başarılıymış gibi göstermeyin.

  • Gerçek bir sevk işlemi yapmadan önce uygunluğu kontrol edin.
  • Anlamsal geçersiz kılmaları bileşen geçersiz kılmalarından ayrı tutun.
  • Açık ve koyu ön plan/arka plan çiftlerini test edin.

ServiceTitan Anvil Tasarım Sistemi Bileşen Örnekleri

Eksiksiz yerel atama örneği

Özgün HTML/CSS/JavaScript; belirteçlerden türetilen görünümler ve bağımlı form durumu.

html
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Dispatch assignment study</title
  ><style>
    :root {
      color-scheme: light;
      --surface: light-dark(#fff, #1a1a1a);
      --hover: light-dark(#f9f9f9, #292929);
      --text: light-dark(#040404, #fff);
      --muted: light-dark(#707070, #c4c4c4);
      --line: light-dark(#e6e6e6, #404040);
      --action: light-dark(#0265dc, #70b1ff);
      --on-action: light-dark(#fff, #1a1a1a);
      --faint: light-dark(#fafcff, #000b19);
      --success: light-dark(#077e50, #0bd085);
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 24px;
      background: var(--surface);
      color: var(--text);
      font:
        16px/1.5 system-ui,
        sans-serif;
    }
    h1 {
      font-size: 28px;
      margin: 8px 0;
    }
    h2 {
      font-size: 20px;
      margin: 0 0 16px;
    }
    p {
      margin: 8px 0 16px;
    }
    .small {
      font-size: 13px;
      color: var(--muted);
    }
    header {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 24px;
    }
    button,
    select {
      font: inherit;
      color: inherit;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 10px 16px;
      min-height: 44px;
    }
    button {
      cursor: pointer;
    }
    button:hover {
      background: var(--hover);
    }
    button:focus-visible,
    select:focus-visible,
    input:focus-visible {
      outline: 3px solid var(--action);
      outline-offset: 3px;
    }
    main {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      margin-top: 24px;
    }
    .board {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
    }
    .job {
      padding: 16px;
      background: var(--faint);
      border-left: 4px solid var(--action);
      margin-bottom: 24px;
    }
    .job strong {
      display: block;
    }
    .people {
      display: grid;
      gap: 12px;
    }
    .person {
      display: grid;
      grid-template-columns: 24px 1fr auto;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 4px;
      align-items: center;
    }
    .person:has(:checked) {
      border-color: var(--action);
      background: var(--faint);
    }
    input {
      accent-color: var(--action);
      width: 18px;
      height: 18px;
    }
    .person small {
      display: block;
      color: var(--muted);
    }
    .person:has(:disabled) {
      background: var(--hover);
    }
    .timeline {
      display: flex;
      gap: 4px;
      margin: 20px 0;
    }
    .timeline span {
      height: 40px;
      flex: 1;
      background: var(--line);
      border-radius: 4px;
    }
    .timeline .open {
      background: var(--action);
    }
    .timeline-label {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--muted);
    }
    label[for="time"] {
      display: block;
      margin: 16px 0 8px;
    }
    .primary {
      background: var(--action);
      color: var(--on-action);
      border-color: var(--action);
      margin-top: 24px;
    }
    .primary:hover {
      filter: brightness(0.95);
      background: var(--action);
    }
    #feedback {
      color: var(--success);
      padding-top: 16px;
    }
    footer {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: 24px;
      font-size: 13px;
      color: var(--muted);
    }
    @media (max-width: 767px) {
      body {
        padding: 16px;
      }
      main {
        grid-template-columns: 1fr;
      }
      .board {
        padding: 16px;
      }
      header {
        display: block;
      }
      header button {
        margin-top: 8px;
      }
      .person {
        grid-template-columns: 24px 1fr;
      }
      .person > span:last-child {
        grid-column: 2;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <div class="small">SERVICE OPERATIONS / LOCAL PLANNING STUDY</div>
        <h1>Assign a service visit</h1>
        <p>Match a sample job with an available technician.</p>
      </div>
      <div>
        <button id="theme" aria-pressed="false">Dark appearance</button>
      </div>
    </header>
    <main>
      <section class="board">
        <h2>Job and technician</h2>
        <div class="job">
          <strong>Sample job #204 · Heating inspection</strong
          ><span>90 minutes · North district · Routine priority</span>
        </div>
        <div class="people" id="people"></div>
      </section>
      <aside class="board">
        <h2>Proposed visit</h2>
        <p id="technician"></p>
        <label for="time">Available start time</label
        ><select id="time"></select>
        <div class="timeline" aria-hidden="true">
          <span></span><span class="open"></span><span class="open"></span
          ><span></span><span></span><span></span>
        </div>
        <div class="timeline-label">
          <span>08:00</span><span>Illustrative day</span><span>17:00</span>
        </div>
        <p class="small">
          The time list is the source of available choices. The bars are a
          decorative schedule summary.
        </p>
        <button id="assign" class="primary">Review assignment</button>
        <p id="feedback" role="status"></p>
      </aside>
    </main>
    <footer>
      Original HTML using Anvil2 Hammer token 3.5.0 light/dark roles. Fictional
      technicians and schedules; no dispatch service connected.
    </footer>
    <script>
      const staff = [
        {
          id: "alex",
          name: "Alex Morgan",
          skill: "Heating specialist",
          slots: ["09:00", "11:00"],
        },
        {
          id: "sam",
          name: "Sam Rivera",
          skill: "General maintenance",
          slots: ["13:00", "15:00"],
        },
        { id: "lee", name: "Lee Chen", skill: "Unavailable today", slots: [] },
      ];
      let selected = "alex";
      const $ = (id) => document.getElementById(id);
      function update() {
        const p = staff.find((s) => s.id === selected);
        $("technician").textContent = p.name + " · " + p.skill;
        $("time").replaceChildren(...p.slots.map((t) => new Option(t, t)));
        $("feedback").textContent = "";
      }
      $("people").replaceChildren(
        ...staff.map((p) => {
          const l = document.createElement("label");
          l.className = "person";
          const input = document.createElement("input");
          input.type = "radio";
          input.name = "technician";
          input.checked = p.id === selected;
          input.disabled = p.slots.length === 0;
          input.onchange = () => {
            selected = p.id;
            update();
          };
          const text = document.createElement("span");
          text.innerHTML = `<strong>${p.name}</strong><small>${p.skill}</small>`;
          const availability = document.createElement("span");
          availability.textContent = p.slots.length
            ? p.slots.length + " start times"
            : "Unavailable";
          l.append(input, text, availability);
          return l;
        }),
      );
      $("time").onchange = () => {
        $("feedback").textContent = "";
      };
      $("assign").onclick = () => {
        $("feedback").textContent =
          "Local plan: " +
          staff.find((s) => s.id === selected).name +
          " at " +
          $("time").value +
          ". No visit has been dispatched.";
      };
      $("theme").onclick = () => {
        let dark = $("theme").getAttribute("aria-pressed") !== "true";
        $("theme").setAttribute("aria-pressed", dark);
        document.documentElement.style.colorScheme = dark ? "dark" : "light";
      };
      update();
    </script>
  </body>
</html>

Kod referansı

  • index.html olarak kaydedin; modern tarayıcılar light-dark() işlevini destekler. Bu, yerel Anvil2 çalışma zamanı değildir.

ThemeProvider entegrasyon referansı

Eksiksiz bir React girdisinde belgelenen anlamsal geçersiz kılma biçimi. Yüklü Anvil2 sürümüne göre doğrulayın.

jsx
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 (
    <ThemeProvider theme={theme}>
      <main>
        <h1>Theme integration check</h1>
        <div style={{ background: 'var(--a2-background-color-primary)', padding: 24 }}>
          <span style={{ color: 'var(--a2-foreground-color-on-primary)' }}>
            Primary role with the provider’s matching foreground role
          </span>
        </div>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById('root')).render(<App />);

Kod referansı

  • Bu sağlayıcı referansı resmî belgelere göre kontrol edilmiştir; yukarıdaki çalışan örnek bağımsız bir HTML uygulamasıdır.
04

ServiceTitan Anvil Tasarım Sistemi Temsilci Kurulumu

Uygulamaya Başlangıç Noktası

Çalıştırılan örnek için Anvil2 paketi gerekmez. Ayrı ThemeProvider örneği, uyumlu bir yerel kurulum gerektirir.

sh
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080

Projeniz İçin Bir İstem

Ajan İstemi
Anvil2 anlamsal rollerini kullanarak bir hizmet atama arayüzü oluşturun. Eksiksiz örnekteki açık/koyu ön plan çiftlerini, teknisyene bağlı zaman seçeneklerini, uygun olmayan personelin devre dışı bırakılmasını ve incelemenin geçersiz kılınmasını koruyun. Özgün HTML ile doğrulanmış bir Anvil2 React kurulumu arasında açıkça seçim yapın. Arka uç yanıtı olmadan sevk işleminin gerçekleştiğini iddia etmeyin.
05

ServiceTitan Anvil Tasarım Sistemi Kaynakları ve Kapsamı

ServiceTitan Anvil2 için bir OpenDesign kılavuzu. Belirteç değerleri, herkese açık Hammer token 3.5.0 sürümünden çıkarılmıştır. Çalışan örnek özgün HTML uygulamasıdır; Anvil2 React çalışma zamanı değildir. Tüm teknisyenler ve uygunluk bilgileri kurgusaldır.