Denozordec
fe32c9313a
Docker images / prepare-release (push) Successful in 9s
Docker images / backend-image (push) Successful in 1m43s
Docker images / frontend-image (push) Successful in 2m58s
Docker images / notify-webhook (push) Skipped
Docker images / updater-image (push) Successful in 39s
Docker images / publish-release (push) Successful in 8s
Replaced existing KPI display implementations across multiple pages with the new KpiStatGrid component for a more consistent and visually appealing presentation of statistics. Updated the Backups, BGP, Certificates, Communities, Containers, Dashboard, and Data Collection pages to utilize the KpiStatGrid, improving the overall user experience and maintainability of the codebase. Additionally, added new dependencies in package.json for required libraries.
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}`.
|