84 lines
3.7 KiB
Markdown
84 lines
3.7 KiB
Markdown
# UI Design Contract (MikrotikManager)
|
||
|
||
Surface: **ReUI Frame**. Kit: `components/reui-kit/`.
|
||
Иерархия: **ReUI PRO > shadcn primitives**.
|
||
Стек: Next.js 16 App Router + Turbopack + shadcn **base-nova** + ReUI `@reui`.
|
||
|
||
Карта: [docs](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [Get Started](https://reui.io/docs/get-started) · [Styling](https://reui.io/docs/styling) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp)
|
||
|
||
## Surface
|
||
|
||
Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings — только **Frame**, не shadcn Card как page shell. Не смешивать Card и Frame на одном ops-экране.
|
||
|
||
Эталон CRUD: [`app/(main)/servers`](../app/(main)/servers).
|
||
Оболочка списков: `DataPageCard` → Frame. Панели: `OpsPanel` → Frame.
|
||
|
||
## Canonical PRO references
|
||
|
||
| Зона | Preview |
|
||
|------|---------|
|
||
| Shell | https://reui.io/preview/base/app-shell-12 |
|
||
| KPI | https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile |
|
||
| Lists | https://reui.io/preview/base/data-grid-filtering-2 |
|
||
| Server rail | https://reui.io/preview/base/list-9 · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile |
|
||
| Settings | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3 |
|
||
| Forms / Sheet | https://reui.io/preview/base/form-7 · https://reui.io/preview/base/sheet-8 |
|
||
| Alert / Badge | https://reui.io/docs/components/base/alert · https://reui.io/docs/components/base/badge |
|
||
| Empty | https://reui.io/preview/base/empty-state-12 |
|
||
|
||
## Kit (`components/reui-kit/`)
|
||
|
||
| Component | Role |
|
||
|-----------|------|
|
||
KPI: только `KpiStatGrid` (hybrid IconTile elevated `size-10.5`, эталон `/wireguard`). Не hand-roll Frame KPI.
|
||
| `CodeExportSheet` | Экспорт кода (.rsc / .conf) — Sheet + Frame + ScrollArea |
|
||
|
||
Переключение сервера (ops-контекст): **`ServerTileRail` + `ServerRailLayout`** (`w-60` = `--sidebar-width`). Desktop rail сворачивается (persist `mm:server-rail-collapsed`); mobile — Sheet. Не Combobox. Страницы: OSPF, Filters, GRE, Recursive Routes, WireGuard, Terminal, Certificates, Probes, **Firewall** (live `/api/firewall`). Combobox — generic primitive, не доменный селектор хостов.
|
||
|
||
Слои:
|
||
|
||
| Слой | Путь |
|
||
|------|------|
|
||
| shadcn | `components/ui/` |
|
||
| ReUI CLI | `components/reui/` |
|
||
| Kit | `components/reui-kit/` |
|
||
| Domain grids | `components/data-grids/` |
|
||
|
||
## Shared App Shell chrome
|
||
|
||
| Токен / зона | Значение |
|
||
|--------------|----------|
|
||
| `--sidebar-width` | `240px` |
|
||
| Header right | AppsMenu → SystemMonitorPopover (тема — в NavUser) |
|
||
| Search | ⌘K / Ctrl+K only |
|
||
| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
|
||
|
||
## Spacing & tokens
|
||
|
||
- `flex` + `gap-*` — не `space-y-*` / `space-x-*`
|
||
- Semantic tokens / ReUI Badge variants — не raw `bg-emerald-*` / hex
|
||
- Max 1 primary CTA на экран
|
||
|
||
## Exceptions (не Frame ops shell)
|
||
|
||
- `network-map` — canvas / topology UX
|
||
- `terminal` — terminal chrome
|
||
|
||
## Forbidden
|
||
|
||
- Card как ops list/dashboard shell
|
||
- Hand-roll data-grid / KPI / code-export при наличии kit
|
||
- Дубль Copy в header + footer export sheet
|
||
- Mixing Card и Frame на одном ops-экране
|
||
- Radix-варианты docs — только Base UI (`base-nova`)
|
||
- Combobox / toolbar-фильтр как переключатель сервера (SoT — `ServerTileRail`)
|
||
|
||
## License
|
||
|
||
```env
|
||
# .env.local (gitignored)
|
||
REUI_LICENSE_KEY=
|
||
```
|
||
|
||
`components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`.
|