Добавлено получение информации о деталях из Parts Index и обновлены компоненты для отображения этой информации. Включены новые типы для работы с данными Parts Index.

2025-06-27 15:31:48 +03:00
parent d44874775c
commit 855018bd6c
6 changed files with 258 additions and 4 deletions
--- a/PARTS_INDEX_INTEGRATION.md
+++ b/PARTS_INDEX_INTEGRATION.md
@ -0,0 +1,117 @@
+# Интеграция Parts Index API
+
+## Описание
+
+В проект добавлена интеграция с Parts Index API для отображения детальной информации о деталях, включая:
+- Главную фотографию детали
+- Штрих-коды
+- Технические характеристики
+- Категории
+- Дополнительные изображения
+- Логотип "powered by Parts Index"
+
+## Реализованные компоненты
+
+### 1. Типы (`src/types/partsindex.ts`)
+- `PartsIndexEntityInfo` - информация о детали
+- `PartsIndexEntityInfoResponse` - ответ API
+- `PartsIndexEntityInfoVariables` - параметры запроса
+
+### 2. Сервис (`src/lib/partsindex-service.ts`)
+- `getEntityInfo(code, brand?, lang?)` - получение информации о детали
+
+### 3. Хук (`src/hooks/usePartsIndex.ts`)
+- `usePartsIndexEntityInfo(code, brand)` - хук для получения данных
+
+### 4. Компонент (`src/components/PartsIndexCard.tsx`)
+- Отображение карточки с информацией о детали
+- Поддержка состояния загрузки
+- Адаптивный дизайн
+
+## Интеграция в страницу поиска
+
+В файле `src/pages/search-result.tsx` добавлено:
+
+```tsx
+import PartsIndexCard from "@/components/PartsIndexCard";
+import { usePartsIndexEntityInfo } from "@/hooks/usePartsIndex";
+
+// В компоненте:
+const { entityInfo, loading: partsIndexLoading } = usePartsIndexEntityInfo(
+  searchQuery || null,
+  brandQuery || null
+);
+
+// В JSX:
+{partsIndexLoading && (
+  <PartsIndexCard 
+    entityInfo={null as any} 
+    loading={true}
+  />
+)}
+{entityInfo && !partsIndexLoading && (
+  <PartsIndexCard 
+    entityInfo={entityInfo} 
+    loading={false}
+  />
+)}
+```
+
+## API Parts Index
+
+### Endpoint
+```
+GET https://api.parts-index.com/v1/entities
+```
+
+### Параметры
+- `code` (обязательный) - артикул детали
+- `brand` (опциональный) - бренд
+- `lang` (опциональный) - язык (по умолчанию 'ru')
+
+### Заголовки
+```
+Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE
+Accept: application/json
+```
+
+### Пример запроса
+```bash
+curl -H "Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE" \
+     "https://api.parts-index.com/v1/entities?code=059198405B&brand=VAG&lang=ru"
+```
+
+## Тестирование
+
+### URL для тестирования
+```
+http://localhost:3002/search-result?article=059198405B&brand=VAG
+```
+
+### Тестовая HTML страница
+Создана страница `test-parts-index.html` для демонстрации работы API без React.
+
+## Функциональность
+
+1. **Автоматическая загрузка** - при переходе на страницу результатов поиска
+2. **Главная фотография** - отображается первое изображение из массива
+3. **Логотип Parts Index** - в правом верхнем углу карточки
+4. **Характеристики** - первые 6 параметров из API
+5. **Штрих-коды** - все доступные штрих-коды
+6. **Дополнительные изображения** - до 4 дополнительных фото
+7. **Обработка ошибок** - скрытие изображений при ошибке загрузки
+
+## Стили
+
+Компонент использует Tailwind CSS классы для стилизации:
+- Адаптивная сетка для характеристик
+- Скроллинг для дополнительных изображений
+- Состояние загрузки с анимацией
+- Обработка ошибок изображений
+
+## Производительность
+
+- Загрузка данных только при наличии артикула
+- Кэширование на уровне React Query (через Apollo Client)
+- Ленивая загрузка изображений
+- Обработка ошибок сети