WorkspaceTree
Panel boczny widoku agentów: każdy projekt, jego główna kopia i worktree oraz sesje w każdym, z zebranym najpilniejszym stanem. Wybierz go, gdy sesje są pogrupowane według miejsca, w którym działają.
- WorkspaceTree
- WorkspaceRow
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: WorkspaceTree
notesWaiting for you
main copyDone2 sessions
Update search docsDone
ShellReady
feature/search-indexWaiting for you2 sessions
@reviewerWaiting for you
Search testsWorking
marketing-site-with-a-very-long-repository-name
Open: reviewer
Noc, podgląd: WorkspaceTree
notesWaiting for you
main copyDone2 sessions
Update search docsDone
ShellReady
feature/search-indexWaiting for you2 sessions
@reviewerWaiting for you
Search testsWorking
marketing-site-with-a-very-long-repository-name
Open: reviewer
Wysoki kontrast, podgląd: WorkspaceTree
notesWaiting for you
main copyDone2 sessions
Update search docsDone
ShellReady
feature/search-indexWaiting for you2 sessions
@reviewerWaiting for you
Search testsWorking
marketing-site-with-a-very-long-repository-name
Open: reviewer
UżycieLink do sekcji Użycie
import { WorkspaceTree, WorkspaceRow } from '@skribly/ui/agents'<WorkspaceTree label={t('workspaces')} selectedKey={open} onSelect={setOpen}>
<WorkspaceRow id="notes" kind="project" label="notes" state={rollUpSessionState(states)} stateLabel={…}>
<WorkspaceRow id="main" kind="workspace" label={t('mainCopy')} count={2} countLabel={t('sessions', { n: 2 })}>
<WorkspaceRow id="s1" kind="session" label="@reviewer" state="blocked" stateLabel={t('state.blocked')} />
</WorkspaceRow>
</WorkspaceRow>
</WorkspaceTree>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Drzewo React Aria: klawisze strzałek przesuwają, w prawo otwiera gałąź, a w lewo ją zamyka, wpisywanie przeskakuje do wiersza, a Enter lub Spacja otwiera wiersz, który wtedy jest odczytywany jako zaznaczony.
- Zebrane stany pokazują swój znak i zachowują słowo dla czytników ekranu; liczniki mają własne słowa.
- Przyciski wiersza pojawiają się po najechaniu, przy fokusie z klawiatury i na zaznaczonym wierszu, a na ekranach dotykowych zawsze.
- Długie nazwy są ucinane na ekranie, odczytywane w całości i pokazywane w całości w natywnym dymku podpowiedzi.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.