diff --git a/.cursor/rules/frontend-ui-patterns.mdc b/.cursor/rules/frontend-ui-patterns.mdc index f1da28d..0db863d 100644 --- a/.cursor/rules/frontend-ui-patterns.mdc +++ b/.cursor/rules/frontend-ui-patterns.mdc @@ -158,6 +158,7 @@ Toggle «Доска» / «К каталогу» — всегда `outline` в `p ``` AppShell main: gap-4 md:gap-6, px-4 md:px-6, py-4 md:py-5 + (--sidebar-width: 240px; header h-12; AppSwitcher + AppsMenu — Shared App Shell chrome) PageShell: gap-4 md:gap-6 Title/desc: gap-px Card/Frame grid: gap-4 (dashboard denser: gap-2 md:gap-3) @@ -167,6 +168,8 @@ Toolbar / header actions: gap-2 Tabs list (line): gap-5 ``` +Shared chrome (vps-tracker / CFDM / EvoBGP): см. [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md) — секция **Shared App Shell chrome**. Preview: [app-shell-12](https://reui.io/preview/base/app-shell-12). + **Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner / plain «Загрузка…» без Skeleton. ## UX/UI (состояния данных) diff --git a/apps/web/src/lib/app-switcher-config.ts b/apps/web/src/lib/app-switcher-config.ts index 34e52ff..90ac587 100644 --- a/apps/web/src/lib/app-switcher-config.ts +++ b/apps/web/src/lib/app-switcher-config.ts @@ -58,6 +58,14 @@ export const DEFAULT_APP_SWITCHER_CONFIG: AppSwitcherConfig = { icon: 'cloud', shortcut: '⌘2', }, + { + id: 'evobgp', + name: 'EvoBGP', + subtitle: 'BGP маршрутизация', + url: 'http://192.168.100.67:3000', + icon: 'globe', + shortcut: '⌘3', + }, ], } diff --git a/docs/ui-design-contract.md b/docs/ui-design-contract.md index dd75b32..02035d8 100644 --- a/docs/ui-design-contract.md +++ b/docs/ui-design-contract.md @@ -17,7 +17,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad | Зона | Block | Preview | |------|-------|---------| -| Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 | +| 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 | @@ -47,9 +47,28 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad Gating: DB `show_quick_actions` / `showQuickActions` / `ui_show_quick_actions` (default `true`). +## Shared App Shell chrome + +Эталон: CFDM + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12) · monitor/switchers [app-shell-7](https://reui.io/preview/base/app-shell-7). + +При переключении между vps-tracker / CFDM / EvoBGP меняются **только** sidebar nav и `main` content. ClassNames chrome идентичны. + +| Токен / зона | Значение | +|--------------|----------| +| `--sidebar-width` | `240px` | +| Sidebar accent | primary **14%** mix + transparent border | +| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` (без blur / без `h-16`) | +| Header right | **AppsMenu** → **SystemMonitorPopover** → **ModeToggle** | +| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` | +| Sidebar header | `AppSwitcher` (не static brand) | + +App Switcher ids: `vps-tracker` · `cfdm` · `evobgp`. Override: `VITE_APP_SWITCHER` JSON. + +QuickActionGrid icons: только semantic **text** (`text-info` / `text-primary` / …) на kit `bg-muted` — без solid `bg-primary` fills. Preview: [stats-12](https://reui.io/preview/base/stats-12). + ## System monitor -`SystemMonitorPopover` in header next to `ModeToggle`. Preview: https://reui.io/preview/base/app-shell-12 +`SystemMonitorPopover` in header next to `ModeToggle` (после AppsMenu). Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7 ## MCP workflow @@ -63,7 +82,8 @@ Primitives: MCP `plugin-shadcn-shadcn` + `@cfdm/ui`. ## Spacing -- Main: `gap-4 md:gap-6`, `px-4 md:px-6` +- 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-*` — use `flex` + `gap-*` - Max 1 primary CTA per screen - Semantic tokens only (`variant="success"|"info"|"warning"`) — no raw `bg-emerald-*` diff --git a/packages/db/src/settings-repo.ts b/packages/db/src/settings-repo.ts index 4ca3b54..0fbc7c6 100644 --- a/packages/db/src/settings-repo.ts +++ b/packages/db/src/settings-repo.ts @@ -24,6 +24,14 @@ const DEFAULT_APP_SWITCHER: AppSwitcherConfig = { icon: "cloud", shortcut: "⌘2", }, + { + id: "evobgp", + name: "EvoBGP", + subtitle: "BGP маршрутизация", + url: "http://192.168.100.67:3000", + icon: "globe", + shortcut: "⌘3", + }, ], };