Исправление UI страницы результатов поиска при отсутствии результатов

- Скрыт компонент InfoSearch когда нет результатов поиска - Изменен текст с 'Найдено 0 предложений от -' на 'Ничего не найдено' - Убраны фильтры и форма поиска внизу страницы при отсутствии результатов - Разрешен конфликт в ProfileHistoryItem.tsx
2025-07-11 08:32:18 +03:00
parent b11142ad0f 508ad8cff3
commit 791152a862
11 changed files with 127 additions and 128 deletions
--- a/src/components/LKMenu.tsx
+++ b/src/components/LKMenu.tsx
@ -64,7 +64,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
                <div
                  className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
                    isActive ? 'bg-slate-200' : 'bg-white'
-                  }`}
+                  } hover:bg-slate-200`}
                >
                  <img
                    loading="lazy"
@ -93,7 +93,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
                    <div
                      className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
                        isActive ? 'bg-slate-200' : 'bg-white'
-                      }`}
+                      } hover:bg-slate-200`}
                    >
                      <img
                        loading="lazy"
--- a/src/components/profile/LegalEntityListBlock.tsx
+++ b/src/components/profile/LegalEntityListBlock.tsx
@ -92,7 +92,7 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
          <div
            key={entity.id}
            layer-name="legal"
-            className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5"
+            className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5 hover:bg-slate-200 transition-colors cursor-pointer"
          >
            <div className="flex relative justify-between items-center self-stretch max-sm:flex-col max-sm:gap-4 max-sm:items-start">
              <div className="flex relative gap-5 items-center max-md:flex-wrap max-md:gap-4 max-sm:flex-col max-sm:gap-2.5 max-sm:items-start">
--- a/src/components/profile/ProfileActsMain.tsx
+++ b/src/components/profile/ProfileActsMain.tsx
@ -78,14 +78,14 @@ const ProfileActsMain = () => {
              <div
                key={tab}
                layer-name="Tabs_button"
-                className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200"}`}
+                className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] text-[14px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200 hover:bg-slate-200"}`}
                onClick={() => setActiveTab(tab)}
                style={{ cursor: 'pointer' }}
              >
                <div className={`flex relative gap-5 justify-center items-center px-6 py-3.5 rounded-xl flex-[1_0_0] ${activeTab === tab ? "bg-red-600" : "bg-slate-200"}`}>
                  <div
                    layer-name="Курьером"
-                    className={`relative text-lg font-medium leading-5 text-center max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`}
+                    className={`relative font-medium leading-5 text-center text-[14px] max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`}
                  >
                    {tab}
                  </div>
--- a/src/components/profile/ProfileGarageMain.tsx
+++ b/src/components/profile/ProfileGarageMain.tsx
@ -179,7 +179,7 @@ const ProfileGarageMain = () => {

        {!vehiclesLoading && filteredVehicles.map((vehicle) => (
          <div key={vehicle.id} className="mt-8">
-            <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full">
+            <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
              <div className="flex flex-wrap gap-8 items-center w-full max-md:max-w-full">
                <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
                  <div className="self-stretch my-auto text-xl font-bold leading-none text-gray-950">
@ -400,10 +400,10 @@ const ProfileGarageMain = () => {
        {!historyLoading && searchHistory.length > 0 && (
          <div className="flex flex-col mt-8 w-full max-md:max-w-full">
            {searchHistory.map((historyItem) => (
-              <div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full">
+              <div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
                <div className="flex flex-wrap gap-10 justify-between items-center w-full max-md:max-w-full">
                  <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
-                    <div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950">
+                    <div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950 w-[300px]">
                      {historyItem.brand && historyItem.model 
                        ? `${historyItem.brand} ${historyItem.model}` 
                        : 'Автомобиль найден'}
--- a/src/components/profile/ProfileHistoryTabs.tsx
+++ b/src/components/profile/ProfileHistoryTabs.tsx
@ -69,7 +69,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
      {tabs.map((tab) => (
        <div
          key={tab}
-          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[200px] ${
+          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[160px] text-[14px] ${
            activeTab === tab
              ? "text-white"
              : "bg-slate-200 text-gray-950"
@ -78,7 +78,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
          onClick={() => onTabChange(tab)}
        >
          <div
-            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[200px] max-md:px-5 ${
+            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[160px] text-[14px] max-md:px-5 ${
              activeTab === tab
                ? "text-white bg-red-600"
                : "bg-slate-200 text-gray-950"
@ -94,7 +94,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
        tabIndex={0}
      >
        <div
-          className="flex justify-between items-center px-6 py-4 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
+          className="flex justify-between items-center px-6 py-3 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
          onClick={() => setIsDropdownOpen((prev) => !prev)}
        >
          <span className="truncate">{selectedManufacturer}</span>
--- a/src/components/profile/ProfileOrdersMain.tsx
+++ b/src/components/profile/ProfileOrdersMain.tsx
@ -172,12 +172,12 @@ const ProfileOrdersMain: React.FC<ProfileOrdersMainProps> = (props) => {
          {tabs.map((tab, idx) => (
            <div
              key={tab.label}
-              className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
+              className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
              style={{ cursor: "pointer" }}
              onClick={() => setActiveTab(idx)}
            >
              <div
-                className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
+                className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
              >
                {tab.label}
              </div>
--- a/src/components/vin/InfoVin.tsx
+++ b/src/components/vin/InfoVin.tsx
@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import VehicleAttributesTooltip from './VehicleAttributesTooltip';

 interface VehicleAttribute {
  key: string;
@ -206,42 +207,14 @@ const InfoVin: React.FC<InfoVinProps> = ({
      </section>

      {/* Tooltip с фиксированным позиционированием */}
-      {showTooltip && vehicleAttributes.length > 0 && (
-        <div 
-          className="fixed w-[500px] max-w-[90vw] bg-white border border-gray-200 rounded-lg shadow-xl z-[9999] p-4 animate-in fade-in-0 zoom-in-95 duration-200"
-          style={{
-            left: `${tooltipPosition.x}px`,
-            top: `${tooltipPosition.y}px`,
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          {/* Заголовок */}
-          <div className="mb-3 pb-2 border-b border-gray-100">
-            <h3 className="text-sm font-semibold text-gray-900">
-              Полная информация об автомобиле
-            </h3>
-            <p className="text-xs text-gray-600 mt-1">{vehicleName}</p>
-          </div>
-
-          {/* Атрибуты в сетке */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            {vehicleAttributes.map((attr, index) => (
-              <div key={index} className="flex flex-col">
-                <dt className="text-xs font-medium text-gray-500 mb-1">{attr.name}</dt>
-                <dd className="text-xs text-gray-900 break-words">{attr.value}</dd>
-              </div>
-            ))}
-          </div>
-
-          {/* Подвал */}
-          <div className="mt-3 pt-2 border-t border-gray-100">
-            <div className="text-xs text-gray-500 text-center">
-              Всего параметров: {vehicleAttributes.length}
-            </div>
-          </div>
-        </div>
-      )}
+      <VehicleAttributesTooltip
+        show={showTooltip && vehicleAttributes.length > 0}
+        position={tooltipPosition}
+        vehicleName={vehicleName}
+        vehicleAttributes={vehicleAttributes}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />
    </>
  );
 };
--- a/src/components/vin/KnotParts.tsx
+++ b/src/components/vin/KnotParts.tsx
@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+  import React, { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";

 interface KnotPartsProps {
@ -195,7 +195,7 @@ const KnotParts: React.FC<KnotPartsProps> = ({
  return (
    <>
      {/* Статус выбранных деталей */}
-      {selectedParts.size > 0 && (
+      {/* {selectedParts.size > 0 && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
          <div className="flex items-center">
            <svg className="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -209,7 +209,7 @@ const KnotParts: React.FC<KnotPartsProps> = ({
            </span>
          </div>
        </div>
-      )}
+      )} */}
      
      <div className="knot-parts">
        {parts.map((part, idx) => {
@ -226,11 +226,11 @@ const KnotParts: React.FC<KnotPartsProps> = ({
          return (
            <div
              key={uniqueKey}
-              className={`part-item p-4 border rounded-lg cursor-pointer transition-colors ${
+              className={`w-layout-hflex knotlistitem  rounded-lg cursor-pointer transition-colors ${
                isSelected 
                  ? 'bg-green-100 border-green-500' 
                  : isHighlighted 
-                    ? 'bg-yellow-100 border-yellow-500' 
+                    ? 'bg-slate-200' 
                    : 'bg-white border-gray-200 hover:border-gray-300'
              }`}
              onClick={() => handlePartClick(part)}
@ -240,13 +240,13 @@ const KnotParts: React.FC<KnotPartsProps> = ({
            >
              <div className="w-layout-hflex flex-block-116">
                <div 
-                  className={`nuberlist ${isSelected ? 'text-green-700 font-bold' : isHighlighted ? 'text-red-700 font-bold' : ''}`}
+                  className={`nuberlist ${isSelected ? 'text-green-700 font-bold' : isHighlighted ? ' font-bold' : ''}`}
                >
                  {part.codeonimage || idx + 1}
                </div>
-                <div className="oemnuber">{part.oem}</div>
+                <div className={`oemnuber ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>{part.oem}</div>
              </div>
-              <div className={`partsname ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? 'text-red-800 font-semibold' : ''}`}>
+              <div className={`partsname ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>
                {part.name}
              </div>
              <div className="w-layout-hflex flex-block-117">
@ -279,82 +279,45 @@ const KnotParts: React.FC<KnotPartsProps> = ({
      {/* Красивый тултип с информацией о детали */}
      {showTooltip && tooltipPart && (
        <div 
-          className="tooltip-detail-modern"
+          className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[350px] min-h-[220px] max-w-full fixed z-[9999]"
          style={{
            position: 'fixed',
            left: tooltipPosition.x,
            top: tooltipPosition.y,
-            zIndex: 1000,
-            pointerEvents: 'none'
+            pointerEvents: 'none',
          }}
        >
-          <div className="tooltip-content-modern">
-            {/* Стрелка тултипа */}
-            <div className="tooltip-arrow"></div>
-            
-            {/* Заголовок */}
-            <div className="tooltip-header-modern">
-              <div className="tooltip-icon">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
-                </svg>
-              </div>
-              <div className="tooltip-title-section">
-                <h4 className="tooltip-title">{tooltipPart.name}</h4>
-                {tooltipPart.oem && (
-                  <div className="tooltip-oem-badge">
-                    <span className="tooltip-oem-label">OEM</span>
-                    <span className="tooltip-oem-value">{tooltipPart.oem}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-            
-            {/* Контент */}
-            <div className="tooltip-body-modern">
-              {tooltipPart.attributes && tooltipPart.attributes.length > 0 ? (
-                <div className="tooltip-attributes-modern">
-                  <div className="tooltip-section-title">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                    Характеристики
-                  </div>
-                  <div className="tooltip-attributes-grid">
-                    {tooltipPart.attributes.map((attr: any, index: number) => (
-                      <div key={index} className="tooltip-attribute-item">
-                        <div className="tooltip-attribute-key">{attr.name || attr.key}</div>
-                        <div className="tooltip-attribute-value">{attr.value}</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <div className="tooltip-no-data">
-                  <div className="tooltip-no-data-icon">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                  </div>
-                  <div className="tooltip-no-data-text">
-                    <div>Дополнительная информация</div>
-                    <div>недоступна</div>
-                  </div>
-                </div>
-              )}
-              
-              {tooltipPart.note && (
-                <div className="tooltip-note-modern">
-                  <div className="tooltip-section-title">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" fill="currentColor"/>
-                    </svg>
-                    Примечание
-                  </div>
-                  <div className="tooltip-note-text">{tooltipPart.note}</div>
-                </div>
+          <div className="flex relative flex-col w-full">
+            {/* Заголовок и OEM */}
+            <div className="mb-4">
+              <div className="font-semibold text-lg text-black mb-1 truncate">{tooltipPart.name}</div>
+              {tooltipPart.oem && (
+                <div className="inline-block bg-gray-100 text-gray-700 text-xs font-mono px-2 py-1 rounded mb-1">OEM: {tooltipPart.oem}</div>
              )}
            </div>
+            {/* Характеристики */}
+            {tooltipPart.attributes && tooltipPart.attributes.length > 0 ? (
+              tooltipPart.attributes.map((attr: any, idx: number) => (
+                <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-normal first:mt-0">
+                  <div className="self-stretch my-auto text-gray-400 w-[150px] break-words">
+                    {attr.name || attr.key}
+                  </div>
+                  <div className="self-stretch my-auto font-medium text-black break-words">
+                    {attr.value}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center w-full py-8">
+                <div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
+              </div>
+            )}
+            {tooltipPart.note && (
+              <div className="flex flex-col mt-6 w-full">
+                <div className="text-gray-400 text-xs mb-1">Примечание</div>
+                <div className="font-medium text-black text-sm">{tooltipPart.note}</div>
+              </div>
+            )}
          </div>
        </div>
      )}
--- a/src/components/vin/VehicleAttributesTooltip.tsx
+++ b/src/components/vin/VehicleAttributesTooltip.tsx
@ -0,0 +1,63 @@
+import React from 'react';
+
+interface VehicleAttribute {
+  key: string;
+  name: string;
+  value: string;
+}
+
+interface VehicleAttributesTooltipProps {
+  show: boolean;
+  position: { x: number; y: number };
+  vehicleName?: string;
+  vehicleAttributes: VehicleAttribute[];
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  imageUrl?: string; // опционально, для будущего
+}
+
+const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
+  show,
+  position,
+  vehicleAttributes,
+  onMouseEnter,
+  onMouseLeave,
+  imageUrl,
+}) => {
+  if (!show) return null;
+  return (
+    <div
+      className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
+      style={{
+        left: `${position.x + 120}px`,
+        top: `${position.y}px`,
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* Фоновое изображение, если будет нужно */}
+      {imageUrl && (
+        <img
+          loading="lazy"
+          src={imageUrl}
+          className="object-cover absolute inset-0 size-full rounded-2xl opacity-10 pointer-events-none"
+          alt="vehicle background"
+        />
+      )}
+      <div className="flex relative flex-col w-full">
+        {vehicleAttributes.map((attr, idx) => (
+          <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
+            <div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
+              {attr.name}
+            </div>
+            <div className="self-stretch my-auto font-medium text-black truncate">
+              {attr.value}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default VehicleAttributesTooltip; 
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@ -199,7 +199,7 @@ const SearchPage = () => {
                              <div key={detail.detailid || index}>
                                <button
                                  onClick={() => handlePartDetail(detail)}
-                                  className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group"
+                                  className="w-full text-left p-4 hover:bg-slate-200 transition-colors block group"
                                >
                                  <div className="flex w-full items-center gap-2">
                                    <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>{detail.manufacturer}</div>
@ -252,7 +252,7 @@ const SearchPage = () => {
                                {vehiclesResult!.catalogs.map((catalog) => (
                                  <tr
                                    key={catalog.catalogCode}
-                                    className="hover:bg-gray-50 cursor-pointer transition-colors"
+                                    className="hover:bg-slate-200 cursor-pointer transition-colors"
                                    onClick={() => {
                                      router.push(`/search-result?article=${encodeURIComponent(searchQuery)}&brand=${encodeURIComponent(catalog.brand)}`);
                                    }}