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'.
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user