test-x6/CLAUDE.md

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

Команды

# 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) — отдельное волокно внутри сложной линии