From b3712af0c0a5a7cb91da123da7417ba7a88f9ffa Mon Sep 17 00:00:00 2001 From: Denozordec Date: Fri, 6 Nov 2026 21:52:09 +0700 Subject: [PATCH] =?UTF-8?q?docs(ui):=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BF=D0=BB=D0=B0=D0=BD=20=D0=BC=D0=B8?= =?UTF-8?q?=D0=B3=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BD=D0=B0=20=D0=B4?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20VPS-Tracker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/ui-design-contract.md | 13 ++++-- docs/ui-migration-plan.md | 88 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 docs/ui-migration-plan.md diff --git a/docs/ui-design-contract.md b/docs/ui-design-contract.md index 87ecd18..c57743e 100644 --- a/docs/ui-design-contract.md +++ b/docs/ui-design-contract.md @@ -15,7 +15,7 @@ Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings export const UI_SURFACE = 'frame' as const ``` -Settings: секции через Frame + `gap` (без hairline `Separator` под PageHeader); `SettingRow` без `FieldSeparator` по умолчанию (`separated` opt-in). Preview: [settings-3](https://reui.io/preview/base/settings-3) · [settings-16](https://reui.io/preview/base/settings-16). +Settings: **line-tabs сверху** (Общие / Синхронизация / Уведомления / Интеграции) вместо боковой навигации; секции через Frame + `gap` (без hairline `Separator` под PageHeader); `SettingRow` без `FieldSeparator` по умолчанию (`separated` opt-in). Preview: [settings-3](https://reui.io/preview/base/settings-3) · [settings-16](https://reui.io/preview/base/settings-16). ## Canonical PRO references @@ -31,6 +31,10 @@ Settings: секции через Frame + `gap` (без hairline `Separator` п | Empty | `empty-state-14` (prefer) / `empty-state-12` | https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12 | | Forms | `form-7` → Sheet/Drawer | https://reui.io/preview/base/form-7 | +## Theme + +Палитра — нейтрали hue 264 (макет «VPS-Tracker»), шрифты **Geist / Geist Mono**. Оверрайд токенов — `apps/web/src/styles/theme.css` поверх `@cfdm/ui/globals.css` (globals — только вывод CLI). В светлой теме сайдбар остаётся тёмным. План миграции: [`ui-migration-plan.md`](ui-migration-plan.md). + ## Kit API (`reui-kit/`) | Component | Role | @@ -51,7 +55,7 @@ Settings: секции через Frame + `gap` (без hairline `Separator` п | App | Section order | |-----|---------------| | EvoBGP / CFDM / EvoFirewall | KPI → **QuickActionGrid** → charts / rest | -| vps-tracker | banner → KPI → charts → attention → **QuickActionGrid** → CSV | +| vps-tracker | banner → KPI → line-tabs «Проблемы» (QuickActionGrid → charts → attention) · «Последние VPS» · «Аккаунты» → CSV | | auth-portal | portal-specific; Quick Actions при наличии dashboard | Gating: DB `show_quick_actions` / `showQuickActions` / `ui_show_quick_actions` (default `true`). @@ -67,8 +71,9 @@ Gating: DB `show_quick_actions` / `showQuickActions` / `ui_show_quick_actions` ( | Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` — **без** 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 → icons `size-4` → **NavUser** в `SidebarFooter` | +| Header right | **SystemMonitorPopover** (пилюля «Внимание»/«Норма»; приложения — в AppSwitcher; тема — в NavUser) | +| Sidebar | AppSwitcher (лого + подзаголовок + список приложений) → SpaceSwitcher → **сворачиваемые** группы (UPPERCASE label + шеврон, `collapsible`) → icons `size-4` → **NavUser** (muted-карточка) в `SidebarFooter` | +| Проблемы в меню | точка `destructive`/`warning` у пункта (не числовой Badge) | | `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` | | Search | hotkey ⌘K / Ctrl+K only (не кнопка в header) | diff --git a/docs/ui-migration-plan.md b/docs/ui-migration-plan.md new file mode 100644 index 0000000..1e54246 --- /dev/null +++ b/docs/ui-migration-plan.md @@ -0,0 +1,88 @@ +# План миграции UI vps-tracker на дизайн «VPS-Tracker» + +Источник: артефакт-канвас [VPS-Tracker](https://claude.ai/artifact/7kPVbQNXa4AWgFkSekZJiN#page-dcb81aee8d83), доски `Vps*.dc.html` + шаблон `TplVps.dc.html` + токены `reui-auth.css`. +Канвас — макет, имитирующий ReUI; его CSS **не переносим**. Используем как спецификацию регионов и токенов, а реализуем на ReUI PRO + shadcn primitives (контракт: [`ui-design-contract.md`](ui-design-contract.md)). + +Лицензия ReUI PRO: `REUI_LICENSE_KEY` есть, премиум-реестр отвечает 200 (проверено на `app-shell-12`). + +## Что не является страницами + +- Блоки `states` («Справочник состояний · не часть страницы») — только спецификация empty/loading/error, на страницах не рендерим. +- Доски `VpsCollapsed`, `VpsLight`, `VpsMobile`, `VpsPalette` — состояния одного экрана; используем для проверки (свёрнутый сайдбар, светлая тема, ширина телефона, ⌘K). +- Инструменты канваса: полосы `wedit`, «звёздочки»/закрепы в меню, атрибуты density/contrast — пропускаем. + +## Сохраняем то, чего нет в макете + +`SpaceSwitcher` (пространства — реальная функция), `GlobalSearch` (⌘K), фильтры ReUI `Filters` в списках, CSV-экспорт, row actions. Макет их не отменяет. + +## Сопоставление блоков макета → ReUI + +| Блок макета | Реализация | ReUI / shadcn | +|---|---|---| +| sidebar `asbtn` (лого + «Учёт серверов и платежей») + поповер приложений | `AppSwitcher` (+ пункты бывшего `AppsMenu`) | shadcn `sidebar`, `dropdown-menu`; эталон [app-shell-12](https://reui.io/preview/base/app-shell-12) `brand.tsx` | +| `grph` — сворачиваемые группы (UPPERCASE + шеврон) | `NavGroup` в `app-shell.tsx` | shadcn `sidebar` + `collapsible` (паттерн Collapsible SidebarGroup) | +| `pdot` — точка проблем у пункта меню | `SidebarMenuBadge` / точка `bg-destructive` | shadcn `sidebar` | +| `user` — NavUser карточкой | `NavUser` | [app-shell-1](https://reui.io/preview/base/app-shell-1) user menu | +| header: trigger + crumbs + `statb` | `AppShell` header, без `AppsMenu` | shadcn `breadcrumb`, `popover` | +| `statb` «Внимание · ●1 ●2» → монитор | триггер `SystemMonitorPopover` | `@reui/badge` (`warning-light`/`destructive-light`) | +| h1 + sub + actions | `PageHeader` | — | +| `banner` / `note` | `Alert` | `@reui/alert` | +| `kpi` (иконка слева, label, value, chip) | `KpiStatGrid` | `@reui/icon-tile`, `@reui/badge`, Frame ([stats-12](https://reui.io/preview/base/stats-12)) | +| `ptabs` — вкладки страницы со счётчиками | `CountedLineTabs` | shadcn `tabs` variant `line` (c-tabs-2) | +| `seg` — сегменты вида/снимка | `ToggleGroup` | shadcn `toggle-group` | +| `grid` — Frame: заголовок, поиск, колонки, виды, bulk, футер | `ResourcePage` / `FrameDataGrid` | `@reui/data-grid`, `@reui/filters`, `@reui/frame` ([data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)) | +| `cards` (быстрые действия) | `QuickActionGrid` | Frame tiles | +| `chart` | Recharts через shadcn `chart` | — | +| `kv` | `DetailPanel` | `@reui/frame` | +| `timeline` | `Timeline` | `@reui/timeline` | +| `form` (`frow`) | `SettingRow` | [settings-16](https://reui.io/preview/base/settings-16) | + +## Тема и шрифты + +- Палитра макета: нейтрали с оттенком **hue 264** (`--background: oklch(0.133 0.011 264.376)` и т.д.), `info` — фиолетовый, `chart-1..4` из макета; в светлой теме **сайдбар остаётся тёмным**. +- Где живёт: `packages/ui/src/styles/globals.css` — только вывод `shadcn` CLI, руками не трогаем. Оверрайд — слой приложения **`apps/web/src/styles/theme.css`** (импорт после `@cfdm/ui/globals.css` в `main.tsx`): переопределяет переменные `:root`/`.dark` и `--sidebar*` для светлой темы. Компоненты ReUI не рестайлим — меняются только токены. +- Шрифты: **Geist** / **Geist Mono** через `@fontsource-variable/geist` и `@fontsource-variable/geist-mono`; `--font-sans` / `--font-mono` в `theme.css`. + +## Изменения по экранам (`apps/web/src/routes/_auth/*`) + +| Маршрут | Доска | Изменения | +|---|---|---| +| `dashboard` | VpsDashboard | баннер → KPI (6) → **вкладки** «Проблемы» (быстрые действия, графики Платежи/Расходы, «Здоровье инвентаря») · «Последние VPS» · «Аккаунты» (под риском) | +| `vps` | VpsList | заголовок «VPS / Виртуальные серверы», Alert несвязанных доменов, Frame-грид «Инвентарь VPS» с подзаголовком | +| `vps.$vpsId` | VpsDetail | крошки VPS / IP, действия «К списку VPS» + «Редактировать», **вкладки** Обзор / Финансы / Заметки / Синк | +| `accounts` | VpsAccounts | KPI (4) + грид, действия «Синхронизировать все» + «Добавить» | +| `providers` | VpsProviders | грид «Хостеры» | +| `projects`, `projects.$projectId` | VpsProjects / VpsProjectDetail | KPI (4) + грид | +| `tariffs` | VpsTariffs | Alert расхождений + грид | +| `payments` | VpsPayments | KPI (3) + грид | +| `balance` | VpsBalance | KPI (3) + грид, футер с итогами | +| `reports`, `resources` | VpsReports / VpsResources | сегмент периода, KPI, графики в Frame | +| `renewals` | VpsRenewals | KPI (3) + грид | +| `blocking`, `geo` | VpsBlocking / VpsGeo | KPI (4) + сегменты + вкладки Текущие / История | +| `topology` | VpsTopology | без изменений структуры (холст) | +| `spaces` | VpsSpaces | секции Frame | +| `sync-journal` | VpsSync | грид «Запуски синхронизации» | +| `audit` | VpsAudit | вкладки по действию + переключатель Лента / Таблица | +| `settings/*` | VpsSettings | **вкладки сверху** Общие / Синхронизация / Уведомления / Интеграции вместо боковой навигации `SettingsShell` | + +## Общие компоненты + +- `layout/app-shell.tsx` — сворачиваемые группы, точки проблем, header без `AppsMenu`. +- `app-switcher.tsx` — подзаголовок, приложения из `AppsMenu`; `layout/apps-menu.tsx` удаляется из header. +- `layout/nav-user.tsx` — карточка (muted фон), меню Настройки / Тема / Выйти (без изменений логики). +- `layout/system-monitor-popover.tsx` — триггер-пилюля «Внимание» со счётчиками ошибок/предупреждений, футер «Журнал синка». +- `reui-kit/settings-shell.tsx` — line-tabs сверху. +- `counted-line-tabs.tsx` — счётчик моноширинным текстом как в макете. + +## Порядок + +1. План + контракт (этот документ, [`ui-design-contract.md`](ui-design-contract.md)). +2. Тема и шрифты (`theme.css`, fontsource). +3. Shell: AppSwitcher, группы, NavUser, header, монитор. +4. Kit: `CountedLineTabs`, `SettingsShell`. +5. Экраны: dashboard → VPS detail → settings → audit → blocking/geo → прочие (тексты, колонки). +6. Проверка: dev-сервер, 1440×1000 + свёрнутый сайдбар + светлая тема + телефон; `pnpm --filter web build`, `pnpm --filter web test`; `validate_usage`, `get_audit_checklist`. + +## Установка + +Новые ReUI-элементы не требуются: всё нужное уже установлено (`frame`, `badge`, `alert`, `data-grid`, `filters`, `timeline`, `icon-tile`) и shadcn (`sidebar`, `collapsible`, `tabs`, `toggle-group`). Добавляются только пакеты шрифтов. Если при реализации понадобится новый элемент — `cd apps/web && pnpm dlx shadcn@latest add @reui/`.