vue-pult/docs/migration/header/USER_INFO.md

Документация по переносу раздела "Информация о пользователе" в хедере

Общая структура в React

• Расположение: В AppHeader.tsx, левая часть flex, после заголовка.
• Тип: Div с v-if="user", вложенные div для name/role.
• Зависимости: Tailwind CSS, useAuth для user data.
• JSX:
  {{ user.name || 'Пользователь' }}

  {{ user.role }}

.

Элементы

• Name: div {{ user.name || 'Пользователь' }} (text-sm).
• Role: div class "text-xs opacity-75" {{ user.role }} (text-xs opacity-75).
• Условие: v-if="user" (показывается только если авторизован).

Стили (Tailwind примеры)

• Контейнер: flex items-center space-x-4 (в AppHeader).
• Текст: text-sm text-gray-300 для name, text-xs opacity-75 для role.
• Responsive: text-xs на mobile для всего блока.

Взаимодействие

• Данные: Из useAuth (user from state), отображается после авторизации.
• Нет кликов, пассивный элемент.
• В AppHeader:

  ...

  ...
  .

Vue маппинг

• :
  {{ user.name || 'Пользователь' }}

  {{ user.role }}
  . - inject useAuthStore для user.