clear log

docs/migration/header/USER_INFO.md

@@ -0,0 +1,32 @@
+# Документация по переносу раздела "Информация о пользователе" в хедере
+
+## Общая структура в React
+- **Расположение**: В AppHeader.tsx, левая часть flex, после заголовка.
+- **Тип**: Div с v-if="user", вложенные div для name/role.
+- **Зависимости**: Tailwind CSS, useAuth для user data.
+- **JSX**: <div class="text-sm text-gray-300">
+  <div>{{ user.name || 'Пользователь' }}</div>
+  <div class="text-xs opacity-75">{{ user.role }}</div>
+</div>.
+
+## Элементы
+- 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: <div class="flex items-center space-x-4"> <h1>...</h1> <div v-if="user">...</div> </div>.
+
+## Vue маппинг
+- <template>: <div v-if="user" class="text-sm text-gray-300">
+  <div>{{ user.name || 'Пользователь' }}</div>
+  <div class="text-xs opacity-75">{{ user.role }}</div>
+</div>.
+- inject useAuthStore для user.