From d77f040a5c2ba7b566cd94d50f1776d695988278 Mon Sep 17 00:00:00 2001 From: "Zimin A.N." Date: Mon, 11 May 2026 20:06:18 +0300 Subject: [PATCH] =?UTF-8?q?fix(catalog):=20title=E2=86=92TopBar=20+=20tool?= =?UTF-8?q?bar=E2=86=92tinted=20bar=20+=20table=20white=20+=20font=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per user feedback: - "Справочники 37 шт. эта надпись в топбаре" — title с inline count переехал в TopBar breadcrumb (новый Crumb.caption field, text-cap mute). Catalog page больше не имеет h1 — start straight from toolbar. - "фильтры и кнопки в баре таблицы. бар цветом" — toolbar (scope/bundle pills + counter + Граф + + Создать) обёрнут в tinted `bg-surface-2` rounded bar с border. Визуально отделяет controls от table chrome. - "заголовки таблицы белый фон" — table thead was `bg-surface-2` (cream), сливалось с toolbar bar. Стало `bg-surface` (white) — clean visual separation toolbar (tinted) → table (white). - "→ ссылается шрифт не тот" — InfoPanel section subhead "→ ссылается" / "← используют" был `text-cap` (Tektur uppercase 10.5px bold). Прототип использует regular body Inter lowercase mute. Заменил на `text-body text-mute`. TopBar useBreadcrumb extended: для catalog route добавляет inline `caption` field из useDictionaries() count. Editor route остаётся с mono `subtitle` ("name · v1.0.0"). Different fields rendered с different styles. --- .../src/components/editor/EditorInfoPanel.tsx | 6 ++- .../src/components/layout/TopBar.tsx | 38 ++++++++++++++++++- .../src/routes/dictionaries.index.tsx | 24 ++++++------ 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx b/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx index 0f780a4..5c0863d 100644 --- a/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx +++ b/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx @@ -99,7 +99,9 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane > {outgoingNames.length > 0 && (
-
+ {/* Per prototype: section subhead "→ ссылается" — plain body + * font Inter mute, lowercase (НЕ Tektur uppercase cap). */} +
→ {t('editor.info.outgoing', { defaultValue: 'ссылается' })}
    @@ -119,7 +121,7 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane )} {incomingDeps.length > 0 && (
    -
    +
    ← {t('editor.info.incoming', { defaultValue: 'используют' })}
      diff --git a/ordinis-admin-ui/src/components/layout/TopBar.tsx b/ordinis-admin-ui/src/components/layout/TopBar.tsx index 4bfabb2..47a039a 100644 --- a/ordinis-admin-ui/src/components/layout/TopBar.tsx +++ b/ordinis-admin-ui/src/components/layout/TopBar.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import { Link, useLocation, useNavigate } from '@tanstack/react-router' -import { useDictionaryDetail } from '@/api/queries' +import { useDictionaries, useDictionaryDetail } from '@/api/queries' import { LanguageSwitch } from '@/ui' import { AuthBadge } from '@/auth/AuthBadge' import { ThemeSwitch } from '@/components/layout/ThemeSwitch' @@ -105,6 +105,10 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) { {isLast && crumb.subtitle && ( {crumb.subtitle} )} + {/* Catalog route: inline cap "N шт." count badge after title */} + {isLast && crumb.caption && ( + {crumb.caption} + )} ) })} @@ -150,7 +154,14 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) { ) } -type Crumb = { label: string; to?: string; subtitle?: string } +type Crumb = { + label: string + to?: string + /** Mono-styled secondary text (editor route: "name · v1.0.0"). */ + subtitle?: string + /** Cap-styled count badge (catalog route: "40 шт."). */ + caption?: string +} /** * Breadcrumb из current route. Для editor route ('/dictionaries/$name') @@ -166,6 +177,12 @@ function useBreadcrumb(): Crumb[] { const editorName = editorMatch ? decodeURIComponent(editorMatch[1]) : undefined const editorDict = useDictionaryDetail(editorName) + // Catalog route: total dict count для inline "N шт." subtitle на breadcrumb. + // Запрос cached глобально (useDictionaries) — не вызывает extra fetch. + const isCatalog = path === '/dictionaries' + const dictsQuery = useDictionaries() + const dictsCount = dictsQuery.data?.length + if (path === '/' || path === '') { return [{ label: t('nav.home') }] } @@ -185,6 +202,23 @@ function useBreadcrumb(): Crumb[] { } const rootLabel = ROOT_LABELS[first] ?? first + + // Catalog: title "Справочники" + inline caption "N шт." per user feedback. + if (isCatalog) { + return [ + { + label: rootLabel, + caption: + typeof dictsCount === 'number' + ? t('dict.list.countShort', { + count: dictsCount, + defaultValue: `${dictsCount} шт.`, + }) + : undefined, + }, + ] + } + const crumbs: Crumb[] = [ { label: rootLabel, to: segments.length === 1 ? undefined : `/${first}` }, ] diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx index 6c23bdd..203bc96 100644 --- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx +++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx @@ -218,19 +218,15 @@ function DictionariesPage() { return (
      - {/* PageHeader per redesign: title + inline "N шт." count, без description. - Actions удалены — + Создать переехала в toolbar справа от Граф ⇄. */} -
      -

      {t('nav.dictionaries')}

      - - {data.length} {t('dict.list.countSuffix', { defaultValue: 'шт.' })} - -
      + {/* Title block убран — "Справочники N шт." переехал в TopBar breadcrumb + per user feedback ("эта надпись в топбаре"). Page начинается прямо с + tinted toolbar bar, потом white table. */} - {/* Toolbar per redesign prototype: [scope pills] | [bundle pills] [...] N/M [Граф ⇄] [+ Создать] */} -
      + {/* Toolbar in tinted bar per user feedback ("бар цветом"). + surface-2 (warm cream) визуально отделяет controls от table chrome. */} +
      {/* Scope filter: PUBLIC / INTERNAL / RESTRICTED — pill chips с border */}
      { function DictionaryListTable({ rows }: { rows: DictionaryDefinition[] }) { const { t } = useTranslation() return ( -
      +
      - + {/* White header per user feedback ("заголовки таблицы белый фон"). + Прошлое bg-surface-2 сливалось с toolbar bar. */} +
      {t('dict.col.title', { defaultValue: 'Название' })}