4.4 KiB
4.4 KiB
1. Маршруты и конфиг
- 1.1 Добавить в
shared/config/routes.tsконстанты вложенных путей профиля (PROFILE_DETAILS = '/profile/details',PROFILE_SECURITY,PROFILE_MNEMONIC,PROFILE_TRANSACTIONS); сохранитьTRANSACTIONSдля обратного редиректа. - 1.2 В
app/providers/RouterProvider.tsxобернутьProfilePageв<WalletLayout footer />и описать вложенные маршруты:index→<Navigate to="details" replace />,details,security,mnemonic,transactions. - 1.3 Заменить маршрут
/transactionsна<Navigate to="/profile/transactions" replace />; убрать прямой рендерTransactionsPageпо/transactions. - 1.4 Добавить поясняющие комментарии о двух уровнях
<Outlet/>(WalletLayout → ProfilePage).
2. Layout страницы профиля
- 2.1 Переработать
pages/profile/ui/ProfilePage.tsxв layout: убрать собственныйWalletHeader; двухколоночная разметка — слеваProfileMenu, справаKycBannerнад<Outlet/>. - 2.2 Обновить
pages/profile/ui/ProfilePage.module.css: колонки ~25% / ~75% +gap; перенести медиа-брейкпоинты (< 1024px — стек в одну колонку, < 640px — паддинги).
3. Боковое меню (widget)
- 3.1 Создать
widgets/profile/ui/ProfileMenu.tsx: сверху закреплённыйProfileSummary, ниже список пунктов черезNavLink(Данные профиля, Безопасность, Мнемоническая фраза, Транзакции) с подсветкой активного (aria-current/класс). - 3.2 Создать
widgets/profile/ui/ProfileMenu.module.css(список, активное состояние, отступы). - 3.3 Экспортировать
ProfileMenuизwidgets/profile/index.ts.
4. Контент-пункты
- 4.1 Создать компонент-пункт «Данные профиля» (рендерит
<ProfileDetails/>); показыватьSpinner, покаuseMeгрузится. - 4.2 Создать компонент-пункт «Безопасность» (
<SecuritySection/>) с состоянием загрузки. - 4.3 Создать компонент-пункт «Мнемоническая фраза» (
<MnemonicSection/>) с состоянием загрузки. - 4.4 Вынести содержимое
pages/transactions/ui/TransactionsPage.tsx(список + табы «Транзакции/Заявки» для юр. лиц черезuseMe) в переиспользуемый блок и подключить как компонент-пункт «Транзакции»; показыватьSpinnerво время загрузки.
5. Состояние загрузки
- 5.1 Заменить
if (!data) return nullв блоках профиля на отображение<Spinner label="Загрузка" />в области контента (меню остаётся доступным). - 5.2 Убедиться, что
Spinnerцентрируется в правой колонке (использоватьfullscreen/класс в пределах контента).
6. Проверка
- 6.1
npm run build(tsc) проходит без ошибок типов и сборки. - 6.2 Ручная проверка deep-link: прямой переход на
/profile/details,/profile/security,/profile/mnemonic,/profile/transactionsоткрывает нужный пункт. - 6.3
/profileредиректит на/profile/details;/transactionsредиректит на/profile/transactions. - 6.4 Кнопка «Назад» переключает между ранее открытыми пунктами; активный пункт меню подсвечен.
- 6.5 Транзакции: для юр. лица видны табы «Транзакции/Заявки», для физлица — только список.
- 6.6 Мобильный вид (< 1024px): меню и контент схлопываются в одну колонку;
KycBannerиSpinnerотображаются корректно.