добавлен роутинг между категориями

src/components/vin/VinCategory.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useQuery, useLazyQuery } from '@apollo/client';
 import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_UNITS } from '@/lib/graphql/laximo';
+import { useRouter } from 'next/router';
 
 interface VinCategoryProps {
   catalogCode?: string;
@@ -15,6 +16,7 @@ interface VinCategoryProps {
 }
 
 const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => {
+  const router = useRouter();
   const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
   const lastCategoryIdRef = useRef<string | null>(null);
 
@@ -63,8 +65,20 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
   const loading = activeTab === 'uzly' ? quickGroupsLoading : categoriesLoading;
   const error = activeTab === 'uzly' ? quickGroupsError : categoriesError;
 
+  // Функция для обновления openedPath и catpath в URL
+  const updatePath = (newPath: string[]) => {
+    setOpenedPath(newPath);
+    if (router) {
+      router.push(
+        { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } },
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
+
   const handleBack = () => {
-    setOpenedPath(openedPath.slice(0, openedPath.length - 1));
+    updatePath(openedPath.slice(0, openedPath.length - 1));
   };
 
   const handleCategoryClick = (category: any, level: number) => {
@@ -74,9 +88,9 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
     }
     if (category.children && category.children.length > 0) {
       if (openedPath[level] === (category.quickgroupid || category.categoryid || category.id)) {
-        setOpenedPath(openedPath.slice(0, level));
+        updatePath(openedPath.slice(0, level));
       } else {
-        setOpenedPath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
+        updatePath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
       }
     } else if (category.link && onQuickGroupSelect) {
       onQuickGroupSelect(category);

src/components/vin/VinLeftbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useLazyQuery, useQuery } from '@apollo/client';
 import { GET_LAXIMO_FULLTEXT_SEARCH, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';
+import { useRouter } from 'next/router';
 
 interface VinLeftbarProps {
   vehicleInfo?: {
@@ -32,6 +33,7 @@ interface QuickGroup {
 }
 
 const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect, activeTab: activeTabProp, openedPath = [], setOpenedPath = () => {} }) => {
+  const router = useRouter();
   const catalogCode = vehicleInfo?.catalog || '';
   const vehicleId = vehicleInfo?.vehicleid || '';
   const ssd = vehicleInfo?.ssd || '';
@@ -59,11 +61,39 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const lastCategoryIdRef = React.useRef<string | null>(null);
 
+  // --- Синхронизация openedPath с URL ---
+  // Обновляем openedPath и URL
+  const setOpenedPathAndUrl = (newPath: string[]) => {
+    setOpenedPath(newPath);
+    const params = new URLSearchParams(router.query as any);
+    if (newPath.length > 0) {
+      params.set('catpath', newPath.join(','));
+    } else {
+      params.delete('catpath');
+    }
+    router.push(
+      { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  // Восстанавливаем openedPath из URL
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const catpath = (router.query.catpath as string) || '';
+    if (catpath) {
+      setOpenedPath(catpath.split(',').filter(Boolean));
+    } else {
+      setOpenedPath([]);
+    }
+  }, [router.query.catpath]);
+
   const handleToggle = (categoryId: string, level: number) => {
     if (openedPath[level] === categoryId) {
-      setOpenedPath(openedPath.slice(0, level));
+      setOpenedPathAndUrl(openedPath.slice(0, level));
     } else {
-      setOpenedPath([...openedPath.slice(0, level), categoryId]);
+      setOpenedPathAndUrl([...openedPath.slice(0, level), categoryId]);
       
       // Загружаем units для категории, если они еще не загружены
       if (activeTabProp === 'manufacturer' && !unitsByCategory[categoryId]) {
@@ -133,9 +163,9 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const handleQuickGroupToggle = (groupId: string, level: number) => {
     if (openedPath[level] === groupId) {
-      setOpenedPath(openedPath.slice(0, level));
+      setOpenedPathAndUrl(openedPath.slice(0, level));
     } else {
-      setOpenedPath([...openedPath.slice(0, level), groupId]);
+      setOpenedPathAndUrl([...openedPath.slice(0, level), groupId]);
     }
   };
 

src/pages/vehicle-search/[brand]/[vehicleId].tsx

@@ -309,6 +309,73 @@ const VehicleDetailsPage = () => {
     ogDescription: `Найдите и купите запчасти для ${vehicleName}. Широкий выбор оригинальных и аналоговых запчастей.`
   };
 
+  // --- Синхронизация selectedQuickGroup с URL ---
+  // Функция для открытия VinQuick и добавления quickgroup в URL
+  const openQuickGroup = (group: any) => {
+    setSelectedQuickGroup(group);
+    router.push(
+      { pathname: router.pathname, query: { ...router.query, quickgroup: group.quickgroupid } },
+      undefined,
+      { shallow: true }
+    );
+  };
+  // Функция для закрытия VinQuick и удаления quickgroup из URL
+  const closeQuickGroup = () => {
+    setSelectedQuickGroup(null);
+    const { quickgroup, ...rest } = router.query;
+    router.push(
+      { pathname: router.pathname, query: rest },
+      undefined,
+      { shallow: true }
+    );
+  };
+  // Следим за изменением quickgroup в URL и обновляем selectedQuickGroup
+  useEffect(() => {
+    const quickgroupId = router.query.quickgroup as string;
+    if (quickgroupId) {
+      // Найти группу по id (в openedPath или где-то ещё)
+      // Для простоты: если есть selectedQuickGroup и id совпадает — ничего не делаем
+      if (selectedQuickGroup && selectedQuickGroup.quickgroupid === quickgroupId) return;
+      // Иначе ищем в openedPath или в категориях (можно доработать)
+      // Пока просто создаём объект-заглушку
+      setSelectedQuickGroup({ quickgroupid: quickgroupId });
+    } else {
+      setSelectedQuickGroup(null);
+    }
+  }, [router.query.quickgroup]);
+
+  // --- Синхронизация selectedNode (KnotIn) с URL ---
+  // Открыть KnotIn и добавить unitid в URL
+  const openKnot = (node: any) => {
+    setSelectedNode(node);
+    router.push(
+      { pathname: router.pathname, query: { ...router.query, unitid: node.unitid || node.id } },
+      undefined,
+      { shallow: true }
+    );
+  };
+  // Закрыть KnotIn и удалить unitid из URL
+  const closeKnot = () => {
+    setSelectedNode(null);
+    const { unitid, ...rest } = router.query;
+    router.push(
+      { pathname: router.pathname, query: rest },
+      undefined,
+      { shallow: true }
+    );
+  };
+  // Следить за изменением unitid в URL и обновлять selectedNode
+  useEffect(() => {
+    const unitid = router.query.unitid as string;
+    if (unitid) {
+      if (selectedNode && (selectedNode.unitid === unitid || selectedNode.id === unitid)) return;
+      // Можно доработать: искать node по unitid в категориях/группах
+      setSelectedNode({ unitid });
+    } else {
+      setSelectedNode(null);
+    }
+  }, [router.query.unitid]);
+
   return (
     <>
       <MetaTags {...metaData} />
@@ -339,9 +406,9 @@ const VehicleDetailsPage = () => {
                         setFoundParts(results);
                         setSearchState({ loading, error, query, isSearching: isSearching || false });
                       }}
-                      onNodeSelect={setSelectedNode}
+                      onNodeSelect={openKnot}
                       onActiveTabChange={(tab) => setActiveTab(tab)}
-                      onQuickGroupSelect={setSelectedQuickGroup}
+                      onQuickGroupSelect={openQuickGroup}
                       activeTab={activeTab}
                       openedPath={openedPath}
                       setOpenedPath={setOpenedPath}
@@ -404,17 +471,17 @@ const VehicleDetailsPage = () => {
                         catalogCode={vehicleInfo.catalog}
                         vehicleId={vehicleInfo.vehicleid}
                         ssd={vehicleInfo.ssd}
-                        onBack={() => setSelectedQuickGroup(null)}
+                        onBack={closeQuickGroup}
-                        onNodeSelect={setSelectedNode}
+                        onNodeSelect={openKnot}
                       />
                     ) : (
                       <VinCategory
                         catalogCode={vehicleInfo.catalog}
                         vehicleId={vehicleInfo.vehicleid}
                         ssd={vehicleInfo.ssd}
-                        onNodeSelect={setSelectedNode}
+                        onNodeSelect={openKnot}
                         activeTab={activeTab}
-                        onQuickGroupSelect={setSelectedQuickGroup}
+                        onQuickGroupSelect={openQuickGroup}
                         openedPath={openedPath}
                         setOpenedPath={setOpenedPath}
                       />
@@ -441,10 +508,11 @@ const VehicleDetailsPage = () => {
                   <KnotIn
                     catalogCode={vehicleInfo.catalog}
                     vehicleId={vehicleInfo.vehicleid}
-                    ssd={selectedNode.ssd || vehicleInfo.ssd}  // ИСПРАВЛЕНИЕ: Используем SSD узла, fallback на родительский SSD
+                    ssd={selectedNode.ssd || vehicleInfo.ssd}
                     unitId={selectedNode.unitid}
                     unitName={selectedNode.name}
                     parts={unitDetails}
+                    onBack={closeKnot}
                   />
                   {unitDetailsLoading ? (
                     <div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div>