DenozordecandClaude Sonnet 5.5
4c0a5de7e7
Add ui/DataTable, which builds ReUI's DataGrid from `columns` and `data`, and move all 23 tables onto it. What the grid does not take (a class on a row or cell, `aria-sort`, `style`, `colSpan`, `role`, `hidden`) is put on the elements it drew after every render. The column definitions keep their identity between renders, so cells are not mounted again, and the grid's own paging is off. The stacked rows on a phone, the column labels and the sort order of the original work as before. In Blocking > Lists a group heading is a row whose first cell spans the four columns. docs/reui-migration-plan.md records it. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
82 lines
8.9 KiB
Markdown
82 lines
8.9 KiB
Markdown
# План перевода консоли на ReUI PRO
|
||
|
||
## Рамки
|
||
|
||
- **Design only, zero functionality** (PRODUCT.md, CONVENTIONS.md): меняется только внешний вид. Те же элементы управления, шаги, порядок валидации и **те же английские тексты** (литералы Technitium остаются как есть, интерфейс не русифицируется).
|
||
- Система оформления: «shnt Ops · ReUI PRO» (shadcn `base-nova`, блоки ReUI PRO, `Frame` вместо `Card`, токены `dark` / `light` / `contrast`). Референсы: общий холст Auth Portal + MikrotikManager v2 + EvoFirewall + EvoBGP.
|
||
- 32 реальных URL, адаптив до 390 px без горизонтального переполнения и темы System / Light / Dark сохраняются. Amber по-прежнему не рисуется.
|
||
|
||
## Этап 1. Дизайн на холсте `/design`
|
||
|
||
Один холст «Technitium Console · ReUI PRO». Экраны рисуются по порядку, каждый на реальных данных из `src/screens`:
|
||
|
||
1. **Каркас**: AppShell (сайдбар 240/60 px, шапка 48 px, ⌘K, меню профиля с Change Theme / My Profile / Change Password / 2FA / API token), пункты из `SECTIONS`.
|
||
2. **Login** (+ OTP, Forgot password, LoginCover).
|
||
3. **Dashboard**: KpiStrip, график (Chart.js), heatmap, Top-таблицы, BlockingMenu, сравнение периодов, custom range.
|
||
4. **Zones**: дерево/список зон, записи, панели Add/Edit Record, Add / Clone / Convert / Import / Sign / Unsign Zone, DNSSEC, Zone Options, Permissions, Edit Zone File.
|
||
5. **Cache**: дерево кэша и записи.
|
||
6. **Blocking**: Overview, Rules, Lists, Domain check, Recent blocked.
|
||
7. **Apps**: каталог, установленные, Install / Update / Config.
|
||
8. **DNS Client**.
|
||
9. **Settings**: 9 вкладок (General, Web Service, Optional Protocols, TSIG, Recursion, Cache, Blocking, Proxy & Forwarders, Logging).
|
||
10. **DHCP**: Leases, Scopes, ScopeForm.
|
||
11. **Administration**: Sessions, Users, Groups, Permissions, SSO, LDAP, Cluster, UserDetails.
|
||
12. **Logs**: View Logs, Query Logs.
|
||
13. **About** и состояния: пусто, ошибка, нет доступа, загрузка.
|
||
14. **Вариации**: светлая тема, высокий контраст, телефон 390 px, свёрнутое меню.
|
||
|
||
Результат этапа: холст, проверенный по чек-листу системы (Frame, одна primary-кнопка, DataGrid вместо ручных таблиц, статус = слово + глиф + токен).
|
||
|
||
## Этап 2. Основа во фронтенде
|
||
|
||
1. Подключить Tailwind v4 и shadcn (`base-nova`), создать `components.json` (уже есть), алиас `@/`, `src/theme/globals.css` на токенах системы.
|
||
2. Мост токенов: сопоставить `src/theme/tokens.css` (893 строки) токенам ReUI, не ломая ThemeProvider (System / Light / Dark).
|
||
3. Установить компоненты ReUI: `data-grid`, `filters`, `sheet`, `badge`, `sonner`, `tabs` и т. д.
|
||
|
||
## Этап 3. Миграция `src/ui`, затем экранов
|
||
|
||
Порядок: примитивы → общие части → экраны, по одному экрану на коммит, зелёные тесты на каждом шаге.
|
||
|
||
| Текущее (`src/ui`) | ReUI / shadcn |
|
||
|---|---|
|
||
| Button, Field, Form, Select, Check, Segmented | Button, Field, Select, Checkbox, Switch, ToggleGroup |
|
||
| Table, EditableTable, Pagination | вид DataGrid поверх собственной таблицы (см. «Решения по плану») |
|
||
| Dialog, Confirm, Details | Dialog / AlertDialog / Sheet |
|
||
| Toast, Notifier | собственный Toast с темой ReUI (см. «Решения по плану») |
|
||
| Menu, Tooltip, SubTabs | Popover, Tooltip, стиль Tabs (линия под активной) |
|
||
| Panel, SectionHeader, Alert, Tag, Empty | Frame, Alert, Badge, Empty state |
|
||
|
||
## Этап 4. Проверка
|
||
|
||
Все существующие тесты (`npm test`), `lint`, `lint:language`, `lint:colours`, `typecheck`, сборка, ручной обход в `dev` (Docker, :5380) против `ref` (:5381); 390 px без горизонтального переполнения; три темы.
|
||
|
||
## Риски
|
||
|
||
- Chart.js: цвета серий из `chart-1…4`, поведение прежнее.
|
||
- Скрипты `lint:colours`, `lint:dashes` потребуют обновления под новые токены.
|
||
- Размер бандла: Tailwind и Radix/Base UI добавляются к статической сборке, нужно следить за размером.
|
||
|
||
## Состояние на 2026-10-26
|
||
|
||
| Компонент | Состояние |
|
||
|---|---|
|
||
| Button, Tag, Check, Input/Textarea | ReUI Button, Badge, Checkbox/Switch, Input/Textarea |
|
||
| Segmented, SubTabs | стиль ReUI Tabs, нативные кнопки |
|
||
| Alert, Panel, Dialog, Confirm | ReUI Alert, Frame, Dialog |
|
||
| Tooltip | ReUI Tooltip (роль `tooltip` и `aria-describedby` сохранены) |
|
||
| Menu | ReUI Popover (роли и клавиатура меню остались в `Menu.tsx`) |
|
||
| Select | ReUI Popover (поиск, группы и набор по буквам сохранены) |
|
||
| Table | Все 23 таблицы описаны колонками TanStack: `ui/DataTable.tsx` строит ReUI `DataGrid` из `columns` и `data`, а то, что DataGrid не принимает (класс строки или ячейки, `aria-sort` у `<th>`, `style`, `colSpan`, `role`, `hidden`), навешивает на нарисованные им элементы после каждого рендера. Определения колонок держат стабильную идентичность (иначе ячейки пересоздавались бы при каждом рендере родителя), встроенная пагинация DataGrid выключена (`manualPagination`). В Blocking › Lists строка-заголовок группы это строка, первая ячейка которой растянута на четыре колонки (`colSpan`, `role="columnheader"`, `scope="colgroup"`), а остальные три скрыты. Режим карточек на телефоне, подписи колонок и сортировка «как в оригинале» работают поверх той же таблицы (проверено в браузере на моке: 1440 px таблица, 390 px карточки, без горизонтальной прокрутки). |
|
||
| Toast | свой (фокус возвращается, пауза под курсором, действие с правом); цвета и шрифты из темы ReUI |
|
||
| Тема | палитра shnt Ops в `tokens.css`, Geist, шкала 12/13/14 px, радиусы 8/10/14 px |
|
||
|
||
## Решения по плану
|
||
|
||
| Пункт | Что сделано |
|
||
|---|---|
|
||
| Toast | Уведомление рисует ReUI `sonner`. Часы, пауза под курсором и фокусом, Escape и возврат фокуса остались в `ui/Toast.tsx`. Живая область `role="status"` по-прежнему всегда в странице. Цена замены: перед кнопкой Undo появился один лишний Tab-стоп (обёртка sonner), закрывающееся уведомление остаётся в DOM около 200 мс, а тесты Rules ждут его асинхронно (`findBy`, `waitFor`). |
|
||
| Карточки Dashboard | Одиннадцать карточек собраны в одну панель KPI как на холсте: границы-волоски вместо рамок, плитка с иконкой, подпись без капса. Спарклайны, доля, изменение и переход в Query Logs сохранены. |
|
||
| Table | Таблица строится на примитивах ReUI (`TableHeader`, `TableBody`, `TableFooter` и вид DataGrid). Перевод на TanStack `DataGrid` не сделан: строки и ячейки 23 таблиц несут свои атрибуты (классы строк, `colSpan`, `aria-sort` в `<th>`), а DataGrid отдаёт `<tr>`/`<td>` без хуков для них. Режим карточек на телефоне и подписи колонок держатся на тех же атрибутах. |
|
||
|
||
Сборка, `tsc`, `lint:colours`, `oxlint` проходят. Тесты (`npx vitest run --maxWorkers=3`): 28 падений из 2076, все они падали и до миграции (локаль Windows и отсутствие коммита).
|