Denozordec
cd616c7a03
Build, Test, and Push CFDM Docker Image / test (push) Successful in 4m25s
Build, Test, and Push CFDM Docker Image / build-and-push (push) Successful in 1m46s
Build, Test, and Push CFDM Docker Image / create-release (push) Skipped
Build, Test, and Push CFDM Docker Image / update-wiki (push) Successful in 6s
Обновлены компоненты KpiStatCardBody и KpiStatGridSkeleton для улучшения визуального представления и компоновки. Изменены классы CSS для более компактного и адаптивного отображения, добавлены новые элементы для лучшей организации информации. Обновлена документация для отражения изменений в дизайне KPI карточек.
2.5 KiB
2.5 KiB
UI Design Contract (ops apps)
Единый контракт для vps-tracker, CFDM и EvoBGP. Surface: ReUI Frame. Kit API: apps/web/src/components/reui-kit/.
Карта: llms.txt · Styling · License · Blocks
Surface
// apps/web/src/lib/ui-surface.ts
export const UI_SURFACE = 'frame' as const
Ops / list / dashboard / detail / settings — только Frame, не shadcn Card как shell. Не смешивать Card и Frame на одном ops-экране.
Canonical PRO references
| Зона | Block | Preview |
|---|---|---|
| Shell | app-shell-12 (+ cmdk/monitor где нужно) |
https://reui.io/preview/base/app-shell-12 |
| 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 |
| Settings | settings-16 + SettingRow |
https://reui.io/preview/base/settings-16 |
| Auth | auth-13 |
https://reui.io/preview/base/auth-13 |
| Empty | empty-state-12 |
https://reui.io/preview/base/empty-state-12 |
| Forms | form-7 → Sheet/Drawer |
https://reui.io/preview/base/form-7 |
Kit API (reui-kit/)
| Component | Role |
|---|---|
ResourcePage |
Frame + line tabs + Filters + DataGrid |
KpiStatGrid |
horizontal compact hybrid KPI tiles (variant, Badge) |
OpsDashboard |
KPI + charts + attention queue |
SettingsShell |
settings nav + Outlet |
DetailPanel |
detail Frame sections |
filter-utils |
apply/clear ReUI Filters |
MCP workflow
- MCP
user-reui—search/get_block/get_componentwithsurface: "frame" - Cite
previewUrl+docsUrl - CLI from
apps/web:pnpm dlx shadcn@latest add @reui/... - Adapt into kit — do not hand-roll KPI/grid/settings rows
validate_usage/get_audit_checklist
Primitives: MCP plugin-shadcn-shadcn + @cfdm/ui.
Spacing
- Main:
gap-4 md:gap-6,px-4 md:px-6 - No
space-y-*/space-x-*— useflex+gap-* - Max 1 primary CTA per screen
- Semantic tokens only (
variant="success"|"info"|"warning") — no rawbg-emerald-*
Forbidden
- Card as ops list/dashboard shell
- Hand-rolled data tables when ReUI DataGrid exists
- Hand-rolled KPI grids when
KpiStatGridexists - Mixing Card and Frame surfaces on one ops screen