feat: frontend MVP — детальная схема связей устройств (AntV X6)

- React 18 + TypeScript strict + AntV X6 2.x + AntD 5 + Zustand - Custom nodes: SiteNode, CrossDeviceNode, SpliceNode, DeviceNode, CardNode - 8-слойный автолейаут, порты (left/right), линии с цветами по статусу - Toolbar, дерево навигации, карточка объекта, таблица соединений - Контекстные меню, легенда, drag линий/нод, создание линий из портов - Моковые данные: 3 сайта, 10 устройств, 15 линий Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 22:02:25 +03:00
commit ef816cdcf4
48 changed files with 8738 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,97 @@
+# Test-X6 — Детальная схема связей устройства
+
+Визуализация и редактирование детальных схем связей сетевых устройств на базе AntV X6.
+
+## Стек
+
+- **Frontend:** React 18 + TypeScript + AntD 5 + AntV X6 2.x + Zustand + Vite
+- **Backend:** NestJS + TypeORM + PostgreSQL
+- **Линтинг:** ESLint + Prettier + tsc strict
+
+## Структура проекта
+
+```
+test-x6/
+├── frontend/          # React SPA
+│   └── src/
+│       ├── api/       # HTTP-клиент, типы API
+│       ├── components/# Toolbar, SidePanel, ConnectionsPanel, Layout
+│       ├── features/
+│       │   └── schema/# Ядро: graph/, nodes/, ports/, edges/, layout/, context-menu/, locking/, export/
+│       ├── hooks/     # React-хуки
+│       ├── store/     # Zustand
+│       ├── types/     # Общие TypeScript-типы
+│       ├── constants/ # Цвета статусов, размеры нод, маппинг слоёв
+│       └── utils/
+├── backend/           # NestJS API
+│   └── src/
+│       ├── modules/   # sites, devices, cards, ports, lines, schema, locks, export
+│       ├── common/    # Guards, pipes, filters, interceptors
+│       └── database/  # TypeORM config, миграции
+└── ARCHITECTURE.md    # Детальная архитектура
+```
+
+## Ключевые документы
+
+- `ARCHITECTURE.md` — архитектура, модель данных, API, фазы реализации
+- `frontend/src/features/schema/` — ядро графа X6
+
+## Команды
+
+```bash
+# Frontend
+cd frontend && npm run dev       # dev-сервер
+cd frontend && npm run build     # сборка
+cd frontend && npm run lint      # линтинг
+cd frontend && npm run typecheck # проверка типов
+
+# Backend
+cd backend && npm run start:dev  # dev-сервер
+cd backend && npm run build      # сборка
+cd backend && npm run lint       # линтинг
+cd backend && npm run typecheck  # проверка типов
+cd backend && npm run migration:run      # применить миграции
+cd backend && npm run migration:generate # сгенерировать миграцию
+```
+
+## Правила разработки
+
+### Общие
+- Язык кода и комментариев — **английский**
+- Язык документации и UI — **русский**
+- Строгий TypeScript: `strict: true`, никаких `any`
+- Все сущности используют UUID как первичный ключ
+
+### Frontend
+- Каждый Custom Node X6 — отдельный файл в `features/schema/nodes/`
+- Логика портов (распределение по контейнерам, сортировка, drag) — в `features/schema/ports/`
+- Стили линий и группировка — в `features/schema/edges/`
+- Автолейаут (8 слоёв) — в `features/schema/layout/`
+- State management — Zustand (не Redux, не Context)
+- Компоненты AntD — для всех UI-элементов (модалки, меню, таблицы, формы)
+
+### Backend
+- NestJS модули — по одному на доменную сущность
+- Все эндпоинты — REST, префикс `/api`
+- Валидация — `class-validator` + `class-transformer`
+- Миграции TypeORM — явные, без `synchronize: true` в production
+
+### X6 специфика
+- Вложенность: Site → Device → Card → Port (через X6 embedding)
+- Порты: двухконтейнерная система (left/right), автопереброс при перемещении устройств
+- Линии: два режима роутинга (orth/normal), группировка при >1 линии между устройствами
+- Кроссы: пропорция 1:3, асимметричное скругление, L-порты слева, S-порты справа
+- Перемычки (self-loops): линия выходит из устройства и входит обратно, не пересекая его
+
+## Цветовая карта статусов
+
+Статусы определяют цвет контура/заливки нод и цвет линий. Константы хранятся в `frontend/src/constants/statusColors.ts`.
+
+## Домен
+
+- **Сайт** — физическая площадка с устройствами, может содержать дочерние сайты
+- **Устройство** — сетевое оборудование (активное: роутер, свитч; пассивное: кросс, муфта)
+- **Карта** — вложенная плата/модуль внутри устройства
+- **Порт** — точка подключения на устройстве или карте
+- **Линия** — физическое соединение между портами (простая или сложная — с волокнами)
+- **Волокно (Fiber)** — отдельное волокно внутри сложной линии