Обзор frontend

React SPA, собранная с Vite.

Технологический стек

React 18
react-router-dom v6
TanStack Query v5
lightweight-charts v4
openapi-fetch (с рукописными типами responses.ts)
Vitest + Testing Library + MSW
Vite 5

Структура исходников

Published-структура ниже описывает primary FSD entrypoints. Исторические каталоги полностью мигрированы.

apps/frontend/src/
├── main.tsx                  # Точка входа
├── app/                      # FSD app layer
│   ├── App.tsx               # BrowserRouter → AppRoutes
│   ├── index.ts              # barrel
│   ├── providers/
│   │   ├── AppProviders.tsx  # QueryClientProvider + SessionProvider
│   │   ├── SessionProvider.tsx
│   │   └── index.ts
│   ├── routing/
│   │   ├── AppRoutes.tsx     # Все маршруты
│   │   ├── ProtectedRoute.tsx
│   │   └── index.ts
│   └── layouts/
│       ├── AppLayout.tsx     # Шапка + <Outlet/>
│       └── index.ts
├── features/                  # FSD features
│   └── screener/              # Скринер ценных бумаг (api, model, ui)
├── shared/
│   ├── api/                   # shared API client, response types, generated OpenAPI types
│   └── ui/                    # shared UI primitives without domain logic
├── entities/                 # FSD business entities
│   ├── session/              # Auth/session (api, model)
│   ├── search/               # Market search query slice
│   ├── stock/                # Акции (api, model)
│   ├── bond/                 # Облигации (api, model)
│   ├── portfolio/            # Портфели (api, model)
│   ├── broker-account/       # Брокерский счёт (api, model, ui)
│   ├── broker-position/      # Брокерская позиция (api, model)
│   └── broker-operation/     # Брокерская операция (api, model)
├── widgets/                  # FSD compositional widgets
│   ├── search-bar/                  # Поиск инструментов
│   ├── price-chart/                 # График цены
│   ├── stock-details/               # Детальная карточка акции
│   ├── bond-details/                # Детальная карточка облигации
│   ├── dividends-table/             # Таблица дивидендов
│   ├── broker-account-card/         # Карточка брокерского счёта
│   ├── broker-accounts-summary/     # Сводка брокерских счетов
│   ├── broker-allocation-chart/     # График распределения
│   ├── broker-events-overview/      # Ближайшие события (обзор)
│   ├── broker-operations-table/     # Таблица операций
│   ├── portfolio-card/              # Карточка портфеля
│   ├── portfolio-form/              # Форма портфеля
│   ├── portfolio-summary/           # Сводка портфеля
│   ├── portfolio-analytics/         # Метрики портфеля
│   ├── share-positions-table/       # Таблица позиций-акций
│   └── bond-positions-table/        # Таблица позиций-облигаций
├── pages/                    # FSD page entrypoints
│   ├── home/                 # Главная
│   ├── stock/                # Страница акции
│   ├── bond/                 # Страница облигации
│   ├── LoginPage.tsx         # Вход (не мигрирован)
│   ├── RegisterPage.tsx      # Регистрация (не мигрирован)
│   ├── ProfilePage.tsx       # Профиль (не мигрирован)
│   ├── portfolios/           # Список и детальная портфеля (не мигрирован)
│   ├── screener/             # Скринер (не мигрирован)
│   ├── broker-accounts/      # FSD: page entrypoint
│   ├── broker-account/       # FSD: page entrypoint
│   ├── broker-events/        # FSD: page entrypoint
│   ├── broker-positions/     # FSD: page entrypoint
│   └── broker-operations/    # FSD: page entrypoint
├── test/
│   ├── factories.ts          # Фабрики тестовых данных
│   ├── handlers.ts           # MSW handlers
│   ├── server.ts             # MSW server
│   ├── test-utils.tsx        # Обёртка рендера
│   ├── setup.ts              # Настройка jsdom
│   └── README.md
└── styles.css

FSD-миграция

app-слой

Создан app/ слой FSD, в который перенесены инфраструктурные модули:

app/providers/ — композиция провайдеров (SessionProvider, QueryClientProvider)
app/routing/ — маршруты и ProtectedRoute
app/layouts/ — AppLayout (шапка + Outlet)
app/App.tsx — BrowserRouter → AppRoutes

entities

Домены бизнес-сущностей переведены в FSD:

Сущность	api	model	ui
`session`	login, register, refresh, logout, getMe, updateProfile	SessionContext, useSession	—
`stock`	getStock, getStockCandles, getStockDividends	useStock, useStockCandles, useStockDividends	—
`bond`	getBond, getBondCandles	useBond, useBondCandles	—
`portfolio`	CRUD портфелей и позиций, аналитика	usePortfolio, usePortfolios, usePortfolioAnalytics, usePortfolioMutations, usePositionMutations	—
`search`	—	useSearch	—
`broker-account`	API брокерских счетов	useBrokerAccounts, useBrokerAccountPortfolios	BrokerAccountLayout
`broker-position`	API брокерских позиций	useBrokerPositions	—
`broker-operation`	API брокерских операций	useBrokerOperations	—
`broker-event`	API брокерских событий и выплат	useBrokerEvents	—

Каждая сущность имеет barrel-файл index.ts, реэкспортирующий публичное API.

widgets

Композиционные блоки UI. Каждый виджет — директория с index.ts и ui/:

search-bar — поиск с автодополнением
price-chart — график цены (lightweight-charts)
stock-details, bond-details — детальные карточки бумаг
dividends-table — таблица дивидендов
broker-*-* — UI брокерского домена
portfolio-card, portfolio-form, portfolio-summary, portfolio-analytics — UI портфелей
share-positions-table, bond-positions-table — таблицы позиций

features

features/screener/ — скринер: FilterPanel, FilterPanelBond, FilterPanelShare, ScreenerTable, useScreener hook

7.8 KiB Raw Blame History Unescape Escape