Denozordec
1d497d01c2
Introduced a new `verify_tls` boolean option in health check configurations across various services, allowing users to specify whether to validate TLS certificates during health checks. Updated related components and services to accommodate this new option, ensuring proper handling in both the backend and frontend. Enhanced tests to validate the new functionality and ensure correct behavior with different configurations.
5.4 KiB
UI Design Contract (ops apps)
Единый контракт для vps-tracker, CFDM и EvoBGP. Surface: ReUI Frame. Kit API: apps/web/src/components/reui-kit/.
Карта: llms.txt · Styling · License · Blocks
Surface
Project lock: surface: frame (ReUI Frame). Ops / list / dashboard / detail / settings — только Frame, не shadcn Card как shell. Не смешивать Card и Frame на одном ops-экране.
Settings: секции через Frame + gap (без hairline Separator под PageHeader); SettingRow без FieldSeparator по умолчанию (separated opt-in). Preview: settings-3 · settings-16.
Canonical PRO references
| Зона | Block | Preview |
|---|---|---|
| Shell | app-shell-12 (+ cmdk/monitor где нужно) |
https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7 |
| KPI | horizontal compact hybrid (icon left + label/Badge + value ± variant; EvoBGP visual) | https://reui.io/preview/base/stats-12 |
| Dashboard | dashboard-1 |
https://reui.io/preview/base/dashboard-1 |
| Lists | data-grid-filtering-2 |
https://reui.io/preview/base/data-grid-filtering-2 |
| Settings | settings-16 + SettingRow |
https://reui.io/preview/base/settings-16 |
| Auth | auth-13 |
https://reui.io/preview/base/auth-13 |
| Empty | empty-state-12 |
https://reui.io/preview/base/empty-state-12 |
| Forms | form-7 → Sheet/Drawer |
https://reui.io/preview/base/form-7 |
Kit API (reui-kit/)
| Component | Role |
|---|---|
ResourcePage |
Frame + line tabs + Filters + DataGrid |
KpiStatGrid |
horizontal compact hybrid KPI tiles (variant, Badge) |
QuickActionGrid |
KPI-like quick action tiles under KPI (gated by showQuickActions) |
OpsDashboard |
KPI + optional afterKpi + charts + attention queue |
SettingsShell |
settings nav + Outlet |
DetailPanel |
detail Frame sections |
filter-utils |
apply/clear ReUI Filters |
Dashboard layout
| App | Section order |
|---|---|
| EvoBGP / CFDM | KPI → QuickActionGrid → charts / rest |
| vps-tracker | banner → KPI → charts → attention → QuickActionGrid → CSV |
Gating: DB show_quick_actions / showQuickActions / ui_show_quick_actions (default true).
Shared App Shell chrome
Эталон: EvoBGP production AppShell + ReUI app-shell-12.
При переключении между vps-tracker / CFDM / EvoBGP меняются только sidebar nav labels/hrefs и main content. Разметка, ширина, фон и hover chrome идентичны.
| Токен / зона | Значение |
|---|---|
SIDEBAR_WIDTH / --sidebar-width |
240px (в packages/ui sidebar + Provider style) |
| Sidebar / hover colors | theme --sidebar / --sidebar-accent из globals.css — без AppShell color-mix override |
| Header | h-12, sticky, border-b, px-4 md:px-6 |
| Header left | SidebarTrigger + Separator + Breadcrumb |
| Header right | AppsMenu → SystemMonitorPopover (тема — в NavUser) |
| Sidebar | AppSwitcher → groups (SidebarGroupContent) → icons size-4 → NavUser в SidebarFooter |
main |
gap-4 md:gap-6, px-4 py-4 md:px-6 md:py-5 |
| Search | hotkey ⌘K / Ctrl+K only (не кнопка в header) |
Запрещено в chrome: SidebarRail, sync-row footer, Search/Ctrl+K pill в header, issues Badge в header, muted/hover cascade на right-cluster, Provider color-mix для --sidebar*, ModeToggle в header (тема только в NavUser).
NavUser (footer): avatar + name/email из portal JWT; dropdown — Настройки / Тема (segmented) / Выйти. Preview: app-shell-1.
App Switcher: source of truth — auth-portal GET /api/v1/app-switcher. Ids: cfdm · vps · bgp. Admin: portal /admin/apps. Локальный editor убран.
QuickActionGrid icons: только semantic text (text-info / text-primary / …) на kit bg-muted — без solid bg-primary fills. Preview: stats-12.
System monitor
SystemMonitorPopover in header after AppsMenu (тема — в NavUser, не ModeToggle). Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7
MCP workflow
- MCP
user-reui—search/get_block/get_componentwithsurface: "frame" - Cite
previewUrl+docsUrl - CLI from
apps/web:pnpm dlx shadcn@latest add @reui/... - Adapt into kit — do not hand-roll KPI/grid/settings rows
validate_usage/get_audit_checklist
Primitives: MCP plugin-shadcn-shadcn + @cfdm/ui.
Spacing
- AppShell main:
gap-4 md:gap-6,px-4 py-4 md:px-6 md:py-5(shared chrome) - PageShell / content:
gap-4 md:gap-6 - No
space-y-*/space-x-*— useflex+gap-* - Max 1 primary CTA per screen
- Semantic tokens only (
variant="success"|"info"|"warning") — no rawbg-emerald-*
Forbidden
- Card as ops list/dashboard shell
- Hand-rolled data tables when ReUI DataGrid exists
- Hand-rolled KPI grids when
KpiStatGridexists - Mixing Card and Frame surfaces on one ops screen