feat(admin-ui): minimal React+Vite+TanStack scaffolding

- Vite 7 + React 19 + TanStack Router (file-based) + TanStack Query - Tailwind v4 (CSS-first config, OKLCH brand colors) - i18next + react-i18next с RU/EN switcher в header - Axios client с Accept-Language interceptor + JWT placeholder - 2 pages: /dictionaries (list cards) + /dictionaries/$name (records table) - Dockerfile (node build + nginx serving + API proxy) - README + .gitignore Backend: - Новый GET /api/v1/dictionaries в read-api (DictionaryListController), фильтрует по доступному scope через ScopeContext - DictionaryListItem DTO без heavy schema_json routeTree.gen.ts — stub; реальное содержимое генерится Vite plugin'ом при первом 'pnpm dev'.
2026-05-04 00:55:04 +03:00
parent adc5315948
commit 1eba2ee59b
20 changed files with 609 additions and 0 deletions
@@ -0,0 +1,48 @@
+import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  component: RootLayout,
+})
+
+function RootLayout() {
+  const { t, i18n } = useTranslation()
+  return (
+    <div className="min-h-full flex flex-col">
+      <header className="border-b border-zinc-200 bg-white">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center gap-6">
+          <Link to="/" className="font-semibold text-lg text-brand-700">
+            {t('app.title')}
+          </Link>
+          <nav className="flex gap-4 text-sm">
+            <Link
+              to="/dictionaries"
+              className="text-zinc-600 hover:text-brand-700"
+              activeProps={{ className: 'text-brand-700 font-medium' }}
+            >
+              {t('nav.dictionaries')}
+            </Link>
+          </nav>
+          <div className="ml-auto flex items-center gap-2 text-sm">
+            <button
+              onClick={() => i18n.changeLanguage('ru-RU')}
+              className={`px-2 py-1 rounded ${i18n.language === 'ru-RU' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
+            >
+              RU
+            </button>
+            <button
+              onClick={() => i18n.changeLanguage('en-US')}
+              className={`px-2 py-1 rounded ${i18n.language === 'en-US' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
+            >
+              EN
+            </button>
+          </div>
+        </div>
+      </header>
+      <main className="flex-1 max-w-6xl mx-auto w-full px-6 py-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
@@ -0,0 +1,67 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useRecords } from '@/api/queries'
+
+export const Route = createFileRoute('/dictionaries/$name')({
+  component: DictionaryDetail,
+})
+
+function DictionaryDetail() {
+  const { name } = Route.useParams()
+  const { t } = useTranslation()
+  const { data, isLoading, error } = useRecords(name, 'PUBLIC,INTERNAL,RESTRICTED')
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-6">
+        <Link to="/dictionaries" className="text-sm text-zinc-500 hover:text-brand-700">
+          ← {t('nav.dictionaries')}
+        </Link>
+      </div>
+      <h1 className="text-2xl font-semibold mb-1">{name}</h1>
+      <p className="text-sm text-zinc-500 mb-4">
+        {data?.length ?? 0} {t('dict.list.records')}
+      </p>
+
+      {isLoading && <p className="text-zinc-500">{t('loading')}</p>}
+      {error && <p className="text-red-600">{t('error.failed')}</p>}
+
+      {data && data.length === 0 && (
+        <p className="text-zinc-500 italic">{t('dict.empty')}</p>
+      )}
+
+      {data && data.length > 0 && (
+        <div className="overflow-x-auto bg-white border border-zinc-200 rounded-lg">
+          <table className="w-full text-sm">
+            <thead className="bg-zinc-50 text-zinc-600">
+              <tr>
+                <th className="text-left px-4 py-2 font-medium">{t('dict.col.businessKey')}</th>
+                <th className="text-left px-4 py-2 font-medium">name / code</th>
+                <th className="text-left px-4 py-2 font-medium">{t('dict.col.scope')}</th>
+                <th className="text-left px-4 py-2 font-medium">{t('dict.col.locale')}</th>
+                <th className="text-left px-4 py-2 font-medium">{t('dict.col.validFrom')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((r) => (
+                <tr key={r.id} className="border-t border-zinc-100 hover:bg-zinc-50">
+                  <td className="px-4 py-2 font-mono text-xs">{r.businessKey}</td>
+                  <td className="px-4 py-2">
+                    {String((r.data as Record<string, unknown>).name ?? (r.data as Record<string, unknown>).code ?? '—')}
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="text-xs px-2 py-0.5 rounded bg-zinc-100">{r.dataScope}</span>
+                  </td>
+                  <td className="px-4 py-2 text-zinc-500 text-xs">{r._meta?.locale ?? '—'}</td>
+                  <td className="px-4 py-2 text-zinc-500 text-xs">
+                    {new Date(r.validFrom).toLocaleDateString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,43 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useDictionaries } from '@/api/queries'
+
+export const Route = createFileRoute('/dictionaries')({
+  component: DictionariesPage,
+})
+
+function DictionariesPage() {
+  const { t } = useTranslation()
+  const { data, isLoading, error } = useDictionaries()
+
+  if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
+  if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {(data ?? []).map((d) => (
+        <Link
+          key={d.id}
+          to="/dictionaries/$name"
+          params={{ name: d.name }}
+          className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
+        >
+          <div className="flex items-center justify-between mb-1">
+            <h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
+            <span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
+              {d.scope}
+            </span>
+          </div>
+          <p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
+          <div className="flex gap-2 text-xs text-zinc-400">
+            <span>v{d.schemaVersion}</span>
+            <span>·</span>
+            <span>{d.bundle}</span>
+            <span>·</span>
+            <span>{d.supportedLocales.join(', ')}</span>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/dictionaries' })
+  },
+})