feat(admin-ui): Sidebar 220px + TopBar (Stage 3.1)

2026-05-11 08:51:37 +00:00
parent 6d506fed64
commit b2228c2a29
6 changed files with 444 additions and 104 deletions
@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { GitBranch } from 'lucide-react'
+import { PageHeader } from '@/ui'
+import { EmptyState } from '@/ui/components/empty-state'
+
+/**
+ * Граф связей справочников — d3-force network diagram.
+ *
+ * Stage 3.3 placeholder. Compute graph from {@code useDictionaries() +
+ * useQueries(dependents)}: nodes = dicts, edges = FK refs. Layout —
+ * d3-force с link/charge/center forces. Hover на node → highlight
+ * incoming + outgoing. Click → navigate to dict.
+ *
+ * Dependency: `d3-force` (без full d3, ~30kb gz). Render через canvas
+ * для 40+ nodes performance.
+ */
+export const Route = createFileRoute('/graph')({
+  component: GraphPage,
+})
+
+function GraphPage() {
+  const { t } = useTranslation()
+  return (
+    <div className="flex flex-col gap-4">
+      <PageHeader title={t('graph.title')} description={t('graph.description')} />
+      <EmptyState
+        icon={<GitBranch strokeWidth={1.5} />}
+        title={t('graph.comingSoon.title')}
+        description={t('graph.comingSoon.description')}
+      />
+    </div>
+  )
+}