fix(admin-ui): split /dictionaries into layout + index for nested route

После regen routeTree.gen.ts /dictionaries/$name стал child route /dictionaries.
dictionaries.tsx рендерил карточки без <Outlet/> — клик по карточке менял URL,
но child компонент негде было рендерить, поэтому видна та же страница со списком.

Разнёс по конвенции:
- dictionaries.tsx — layout с <Outlet/>
- dictionaries.index.tsx — карточки списка (matches /dictionaries)
- dictionaries.$name.tsx — без изменений (matches /dictionaries/{name})
This commit is contained in:
Zimin A.N.
2026-05-04 01:57:52 +03:00
parent b1b1f05e3c
commit e09864bbed
3 changed files with 73 additions and 42 deletions
@@ -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>
)
}
+4 -38
View File
@@ -1,43 +1,9 @@
import { createFileRoute, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useDictionaries } from '@/api/queries'
import { createFileRoute, Outlet } from '@tanstack/react-router'
export const Route = createFileRoute('/dictionaries')({
component: DictionariesPage,
component: DictionariesLayout,
})
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>
)
function DictionariesLayout() {
return <Outlet />
}