fix1407

2025-07-14 10:45:27 +03:00
parent d95d008c0c
commit 47844749eb
7 changed files with 95 additions and 30 deletions
--- a/src/components/CoreProductCard.tsx
+++ b/src/components/CoreProductCard.tsx
@ -274,7 +274,11 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
      <div className="w-layout-hflex core-product-search-s1">
        <div className="w-layout-vflex flex-block-48-copy">
          <div className="w-layout-vflex product-list-search-s1">
-            <div className="w-layout-vflex core-product-s1">
+
+            <div className="w-layout-vflex flex-block-48-copy">
+              
+              <div className="w-layout-vflex product-list-search-s1">
+              <div className="w-layout-vflex core-product-s1">
              <div className="w-layout-vflex flex-block-47">
                <div className="div-block-19">
                  <img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
@ -310,8 +314,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                </div>
              )}
            </div>
-            <div className="w-layout-vflex flex-block-48-copy">
-              <div className="w-layout-vflex product-list-search-s1">
                <div className="w-layout-hflex sort-list-s1">
                  <div className="w-layout-hflex flex-block-49">
                    <div className="sort-item first">Наличие</div>
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@ -88,7 +88,7 @@ const Filters: React.FC<FiltersProps> = ({
      if (filter.type === "range") {
        return (
          <FilterRange
-            key={filter.title + idx}
+            key={filter.title + idx + JSON.stringify((filterValues && filterValues[filter.title]) || null)}
            title={filter.title}
            min={filter.min}
            max={filter.max}
--- a/src/components/FiltersPanelMobile.tsx
+++ b/src/components/FiltersPanelMobile.tsx
@ -134,7 +134,7 @@ const FiltersPanelMobile: React.FC<FiltersPanelMobileProps> = ({
            if (filter.type === "range") {
              return (
                <FilterRange
-                  key={filter.title + idx}
+                  key={filter.title + idx + JSON.stringify(localFilterValues[filter.title] || null)}
                  title={filter.title}
                  min={filter.min}
                  max={filter.max}
--- a/src/components/filters/FilterRange.tsx
+++ b/src/components/filters/FilterRange.tsx
@ -24,20 +24,24 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
  const [open, setOpen] = useState(true);
  const trackRef = useRef<HTMLDivElement>(null);

-  // Обновляем локальное состояние при изменении внешнего значения
+  // Обновляем локальное состояние при изменении внешнего значения или границ
  useEffect(() => {
-    if (value) {
-      setFrom(String(value[0]));
-      setTo(String(value[1]));
-      setConfirmedFrom(value[0]);
-      setConfirmedTo(value[1]);
-    } else {
-      setFrom(String(min));
-      setTo(String(max));
-      setConfirmedFrom(min);
-      setConfirmedTo(max);
+    let nextFrom = value ? value[0] : min;
+    let nextTo = value ? value[1] : max;
+    let changed = false;
+    // Корректируем значения, если они вне новых границ
+    if (nextFrom < min) { nextFrom = min; changed = true; }
+    if (nextTo > max) { nextTo = max; changed = true; }
+    if (nextFrom > nextTo) { nextFrom = nextTo; changed = true; }
+    setFrom(String(nextFrom));
+    setTo(String(nextTo));
+    setConfirmedFrom(nextFrom);
+    setConfirmedTo(nextTo);
+    // Если значения были скорректированы, уведомляем родителя
+    if (changed && onChange) {
+      onChange([nextFrom, nextTo]);
    }
-  }, [value, min, max]);
+  }, [value, min, max, onChange]);

  // Обновляем ширину полосы при монтировании и ресайзе
  useLayoutEffect(() => {
--- a/src/components/index/ProductOfDaySection.tsx
+++ b/src/components/index/ProductOfDaySection.tsx
@ -49,6 +49,16 @@ const ProductOfDaySection: React.FC = () => {
      .sort((a, b) => a.sortOrder - b.sortOrder);
  }, [data]);

+  // Корректный сброс currentSlide только если индекс вне диапазона
+  useEffect(() => {
+    if (currentSlide > activeProducts.length - 1) {
+      setCurrentSlide(activeProducts.length > 0 ? activeProducts.length - 1 : 0);
+    }
+    // Если товаров стало больше и текущий слайд = 0, ничего не делаем
+    // Если товаров стало меньше и текущий слайд в диапазоне, ничего не делаем
+    // Если товаров стало меньше и текущий слайд вне диапазона, сбрасываем на последний
+  }, [activeProducts.length]);
+
  // Получаем данные из PartsIndex для текущего товара
  const currentProduct = activeProducts[currentSlide];
  const { data: partsIndexData } = useQuery(
@ -132,11 +142,6 @@ const ProductOfDaySection: React.FC = () => {
    setCurrentSlide(index);
  };

-  // Сброс слайда при изменении товаров
-  useEffect(() => {
-    setCurrentSlide(0);
-  }, [activeProducts]);
-
  // Если нет активных товаров дня, не показываем секцию
  if (loading || error || activeProducts.length === 0) {
    return null;
@ -244,7 +249,7 @@ const ProductOfDaySection: React.FC = () => {
              </div>
              
              {productImage && (
-                <div className="relative">
+                <div className="">
                  <img 
                    width="Auto" 
                    height="Auto" 
--- a/src/components/vin/KnotIn.tsx
+++ b/src/components/vin/KnotIn.tsx
@ -55,6 +55,7 @@ const KnotIn: React.FC<KnotInProps> = ({
  const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
  const [hoveredCodeOnImage, setHoveredCodeOnImage] = useState<string | number | null>(null);
  const router = useRouter();
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false);

  // Получаем инфо об узле (для картинки)
  console.log('🔍 KnotIn - GET_LAXIMO_UNIT_INFO запрос:', {
@ -164,6 +165,12 @@ const KnotIn: React.FC<KnotInProps> = ({
    });
  };

+  // Обработчик клика по картинке (zoom)
+  const handleImageClick = (e: React.MouseEvent<HTMLImageElement>) => {
+    // Если клик был по точке, не открываем модалку (точки выше по z-index)
+    setIsImageModalOpen(true);
+  };
+
  // Обработчик наведения на точку
  const handlePointHover = (coord: any) => {
    // Попробуем использовать разные поля для связи
@ -318,8 +325,9 @@ const KnotIn: React.FC<KnotInProps> = ({
          loading="lazy"
          alt={unitName || unitInfo?.name || "Изображение узла"}
          onLoad={handleImageLoad}
-          className="max-w-full h-auto mx-auto rounded"
+          className="max-w-full h-auto mx-auto rounded cursor-zoom-in"
          style={{ maxWidth: 400, display: 'block' }}
+          onClick={handleImageClick}
        />
        {/* Точки/области */}
        {coordinates.map((coord: any, idx: number) => {
@ -369,8 +377,8 @@ const KnotIn: React.FC<KnotInProps> = ({
                pointerEvents: 'auto',
              }}
              title={`${codeValue} (Клик - выделить в списке, двойной клик - перейти к выбору бренда)`}
-              onClick={() => handlePointClick(coord)}
-              onDoubleClick={() => handlePointDoubleClick(coord)}
+              onClick={e => { e.stopPropagation(); handlePointClick(coord); }}
+              onDoubleClick={e => { e.stopPropagation(); handlePointDoubleClick(coord); }}
              onMouseEnter={() => handlePointHover(coord)}
              onMouseLeave={() => {
                setHoveredCodeOnImage(null);
@ -388,7 +396,31 @@ const KnotIn: React.FC<KnotInProps> = ({
            </div>
          );
        })}
-    </div>
+      </div>
+      {/* Модалка увеличенного изображения */}
+      {isImageModalOpen && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/20 bg-opacity-70"
+          onClick={() => setIsImageModalOpen(false)}
+          style={{ cursor: 'zoom-out' }}
+        >
+          <img
+            src={imageUrl}
+            alt={unitName || unitInfo?.name || "Изображение узла"}
+            className="max-h-[90vh] max-w-[90vw] rounded shadow-lg"
+            onClick={e => e.stopPropagation()}
+            style={{ background: '#fff' }}
+          />
+          <button
+            onClick={() => setIsImageModalOpen(false)}
+            className="absolute top-4 right-4 text-white text-3xl font-bold bg-black bg-opacity-40 rounded-full w-10 h-10 flex items-center justify-center"
+            aria-label="Закрыть"
+            style={{ zIndex: 10000 }}
+          >
+            ×
+          </button>
+        </div>
+      )}
      {/* Модалка выбора бренда */}
      <BrandSelectionModal
        isOpen={isBrandModalOpen}
--- a/src/styles/my.css
+++ b/src/styles/my.css
@ -53,6 +53,7 @@

 .flex-block-40 {
  background-color: #fff;
+  padding-top: 10px;
 }

 input.text-block-31 {
@ -364,6 +365,15 @@ input.input-receiver:focus {
  display: block;
 } 

+.image-5-copy {
+ width: 97px !important;
+ height: 97px !important;
+} 
+.flex-block-111 {
+  width: 172px !important;
+}
+
+
 .show-more-btn {
  background-color: #ec1c24;
  color: #fff;
@ -516,6 +526,9 @@ input#VinSearchInput {
  }
 }

+.div-block-19{
+  padding-left: 20px !important;
+}

 .dropdown-toggle-card {
  align-self: stretch;
@ -913,8 +926,8 @@ a.link-block-2.w-inline-block  {


 .flex-block-15-copy {
-  width: 235px!important;
-  min-width: 235px!important;
+  width: 232px!important;
+  min-width: 232px!important;
 }

 .nameitembp {
@ -966,7 +979,16 @@ a.link-block-2.w-inline-block  {



-
+@media (max-width: 767px) {
+  .flex-block-110 {
+    flex-direction: row !important;
+    align-items: flex-start !important;
+  }
+  .image-5-copy {
+    width: 75px !important;
+    height: 75px !important;
+  }
+}
@media (max-width: 767px) {
  .topmenub {
    display: none !important;