From 9c43b45245280aad4290e000320439ea432e2631 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Fri, 17 Jul 2026 18:36:47 +0700 Subject: [PATCH] =?UTF-8?q?refactor(web):=20=D1=83=D0=BB=D1=83=D1=87=D1=88?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D1=8B=20KpiStatGrid=20=D0=B8=20KpiStatCardBody=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B1=D0=BE=D0=BB=D0=B5=D0=B5=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=B0=D0=BA=D1=82=D0=BD=D0=BE=D0=B3=D0=BE=20?= =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Обновлены стили и структура компонентов KpiStatGrid и KpiStatCardBody для улучшения визуального представления. - Изменены классы и добавлены новые стили для более гибкого и компактного макета. - Обновлена документация для отражения изменений в интерфейсе и описания нового визуального представления KPI. Co-authored-by: Cursor --- .../src/components/reui-kit/kpi-stat-grid.tsx | 29 +++++++++++-------- apps/web/src/lib/ui-surface.ts | 6 ++-- docs/ui-design-contract.md | 4 +-- 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx index 64582e2..121215c 100644 --- a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx +++ b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx @@ -71,11 +71,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) { const valueVariant = card.variant ?? 'default' return ( -
+
{card.icon ? ( @@ -85,7 +85,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) { ) : null} -
+
+
+ {card.label} + {footer ?
{footer}
: null} +
{card.value} - {card.label}
- - {footer ?
{footer}
: null}
) } @@ -147,11 +148,15 @@ function KpiStatGridSkeleton({ count }: { count: number }) {
{Array.from({ length: count }).map((_, index) => ( - - - - - + + +
+
+ + +
+ +
))}
@@ -160,7 +165,7 @@ function KpiStatGridSkeleton({ count }: { count: number }) { } /** - * Hybrid KPI grid — compact stats-12 Frame strip. + * Hybrid KPI — EvoBGP visual (colored icon + Badge) + horizontal compact layout. * Preview: https://reui.io/preview/base/stats-12 */ export function KpiStatGrid({ diff --git a/apps/web/src/lib/ui-surface.ts b/apps/web/src/lib/ui-surface.ts index 748a90a..89566d4 100644 --- a/apps/web/src/lib/ui-surface.ts +++ b/apps/web/src/lib/ui-surface.ts @@ -2,8 +2,8 @@ * VPS Tracker UI surface contract (ReUI Pro). * * Ops / list / dashboard / detail / settings: **Frame** only. - * KPI: hybrid compact **stats-12** via `reui-kit/KpiStatGrid` - * (colored icon → value ± variant → label → Badge footer). + * KPI: horizontal compact hybrid via `reui-kit/KpiStatGrid` + * (icon left + label/Badge + value ± variant). * Lists: **data-grid-filtering-2** via `reui-kit/ResourcePage`. * * @see https://reui.io/preview/base/stats-12 @@ -12,5 +12,5 @@ */ export const UI_SURFACE = 'frame' as const -/** Grid for hybrid compact stats-12 KPI rows (3–6 tiles). */ +/** Grid for horizontal compact hybrid KPI rows (3–6 tiles). */ export const kpiStatGridClassName = '@container w-full' diff --git a/docs/ui-design-contract.md b/docs/ui-design-contract.md index b0e0eb8..83409ab 100644 --- a/docs/ui-design-contract.md +++ b/docs/ui-design-contract.md @@ -18,7 +18,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad | Зона | Block | Preview | |------|-------|---------| | Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 | -| KPI | hybrid `stats-12` (compact Frame strip: colored icon → value ± variant → label → Badge footer) | https://reui.io/preview/base/stats-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 | @@ -31,7 +31,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad | Component | Role | |-----------|------| | `ResourcePage` | Frame + line tabs + Filters + DataGrid | -| `KpiStatGrid` | hybrid compact stats-12 KPI tiles (`variant`, Badge footer) | +| `KpiStatGrid` | horizontal compact hybrid KPI tiles (`variant`, Badge) | | `OpsDashboard` | KPI + charts + attention queue | | `SettingsShell` | settings nav + Outlet | | `DetailPanel` | detail Frame sections |