Структура проекта¶
Уровень: L2 (детали) | Вверх: ../README.md
Принцип организации¶
Проект организован по layer-based подходу с элементами feature-based для модуля offline. Каждая директория верхнего уровня соответствует архитектурному слою или функциональной области. Зависимости направлены сверху вниз: страницы → компоненты → хуки → сторы → API → offline.
Дерево директорий¶
frontend/src/
├── api/ # HTTP-клиент и модули API (8 файлов, ~240 строк)
│ ├── client.ts # Axios instance с интерцепторами auth/refresh
│ ├── auth.ts # Аутентификация: login, register, refresh, getMe
│ ├── items.ts # CRUD для вещей
│ ├── outfits.ts # CRUD для образов + share + suggest-title
│ ├── media.ts # Загрузка и получение медиа (с компрессией)
│ ├── feed.ts # Получение ленты образов
│ ├── reference.ts # Справочники: цвета, категории, слоты, стили
│ └── share.ts # Шаринг образов по токену
│
├── components/ # Переиспользуемые React-компоненты (34 файла, ~1 765 строк)
│ ├── ui/ # Базовые UI-элементы (17 TSX + CSS, ~1 307 строк)
│ ├── common/ # Бизнес-компоненты (6 TSX + CSS, ~224 строки)
│ └── layout/ # Компоненты каркаса (3 TSX + CSS, ~234 строки)
│
├── config/ # Конфигурация и маппинги (1 файл, ~64 строки)
│ └── attrMappings.ts # ML article type → категория, цвет → название
│
├── embeddings/ # Векторные эмбеддинги и поиск похожих (7 файлов, ~421 строка)
│ ├── embeddingTypes.ts # Типы: SimilarityResult, WorkerMessage
│ ├── embeddingRepository.ts # CRUD эмбеддингов в IndexedDB
│ ├── vectorMath.ts # Косинусное сходство, евклидово расстояние
│ ├── outfitEmbeddingService.ts # Вычисление эмбеддинга образа
│ ├── similarityService.ts # Поиск похожих через Web Worker
│ ├── useEmbeddingSearch.ts # React-хуки: useSimilarItems, useSimilarOutfits
│ └── search.worker.ts # Web Worker для вычислений сходства
│
├── hooks/ # Пользовательские React-хуки (4 файла, ~352 строки)
│ ├── useDebounce.ts # Дебаунс значения (400ms по умолчанию)
│ ├── useWeather.ts # Погода: геолокация, кэш 30 мин, Open-Meteo API
│ ├── useVirtualPagination.ts # Виртуальная пагинация (IntersectionObserver)
│ └── useServiceWorker.ts # Управление обновлениями PWA
│
├── offline/ # Offline-first функциональность (17 файлов, ~1 933 строки)
│ ├── db/ # Dexie.js схема и инстанс (7 таблиц, v1–v4)
│ ├── hooks/ # Хуки для локальных данных (6 файлов)
│ ├── network/ # Отслеживание сетевого статуса
│ ├── repositories/ # Слой доступа к данным (items, outfits, media, sync)
│ ├── services/ # Бизнес-логика (initialSync, offlineItems/Outfits)
│ └── sync/ # Очередь синхронизации и движок (syncEngine)
│
├── pages/ # Страницы приложения (16 TSX + CSS, ~3 741 строка)
│ ├── HomePage.tsx # Главная: погода, коллекции, недавние образы
│ ├── FeedPage.tsx # Лента: infinite scroll, фильтры, save/unsave
│ ├── WardrobePage.tsx # Гардероб: фильтры (слот, цвет, стиль, сезон)
│ ├── WardrobeItemPage.tsx # Детали вещи: редактирование, похожие
│ ├── AddItemSourcePage.tsx # Добавление: камера или файл
│ ├── AddItemDetailsPage.tsx # Детали вещи: ML-предсказания, форма
│ ├── OutfitsPage.tsx # Список образов: фильтр own/external
│ ├── OutfitBuilderPage.tsx # Конструктор: слоты, AI-заголовок
│ ├── OutfitDetailPage.tsx # Детали образа: вещи, похожие, удаление
│ ├── ItemSelectPage.tsx # Выбор вещи для слота в конструкторе
│ ├── ProfilePage.tsx # Профиль: аватар, shared-образы, статистика
│ ├── SettingsPage.tsx # Настройки: имя, пароль, аватар
│ ├── SharePage.tsx # Шаринг: ссылка, сторис-изображение
│ ├── ShareRecipientPage.tsx # Просмотр shared-образа по токену
│ ├── LoginPage.tsx # Авторизация
│ └── RegisterPage.tsx # Регистрация
│
├── routes/ # Маршрутизация (1 файл)
│ └── ProtectedRoute.tsx # Редирект на /login если не авторизован
│
├── shared/ # Общие ресурсы (статические ассеты)
│
├── stores/ # Zustand-сторы (2 файла, ~155 строк)
│ ├── auth.ts # Аутентификация: токены, user, hydrate, logout
│ └── outfitBuilder.ts # Конструктор образов: слоты, выбор вещей
│
├── theme/ # Дизайн-система (5 файлов, ~380 строк)
│ ├── tokens.ts # Сырые дизайн-токены (цвета, шрифты, отступы)
│ ├── semanticTokens.ts # Семантические токены
│ ├── typography.ts # Типографические стили
│ ├── antdTheme.ts # Кастомизация темы Ant Design
│ └── cssVars.css # CSS custom properties
│
├── types/ # TypeScript-типы (2 файла, ~289 строк)
│ └── api.ts # Все DTO: User, Item, Outfit, Media, ...
│
├── utils/ # Утилиты (6 файлов, ~410 строк)
│ ├── compressImage.ts # Сжатие изображений (canvas, max 896×896)
│ ├── media.ts # Построение URL медиа-ресурсов
│ ├── feedSessionCache.ts # Кэш сессии ленты
│ ├── generateOutfitStoryImage.ts # Генерация сторис-изображения
│ ├── ruPluralize.ts # Русские склонения
│ └── showAppConfirm.ts # Диалог подтверждения
│
├── App.tsx # Корневой компонент: Router, QueryProvider, тема
├── main.tsx # Точка входа: hydrate, syncEngine, SW
├── queryClient.ts # Конфигурация React Query (staleTime: 5 мин)
└── vite-env.d.ts # Vite environment types
Зависимости между модулями¶
graph TD
pages --> components
pages --> hooks
pages --> stores
pages --> offline_hooks["offline/hooks"]
pages --> embeddings
components --> stores
components --> utils
components --> offline_hooks
hooks --> api
hooks --> stores
offline_hooks --> offline_repos["offline/repositories"]
offline_hooks --> api
offline_services["offline/services"] --> offline_repos
offline_services --> api
offline_services --> offline_sync["offline/sync"]
offline_sync --> offline_repos
offline_sync --> api
offline_repos --> offline_db["offline/db"]
embeddings --> offline_db
api --> types
stores --> types
offline_repos --> types
-> Детали по каждому модулю и файлу: module-details.md