ef816cdcf4
- 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>
98 lines
5.2 KiB
Markdown
98 lines
5.2 KiB
Markdown
# 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)** — отдельное волокно внутри сложной линии
|