32 lines
1.6 KiB
Markdown
32 lines
1.6 KiB
Markdown
# Документация по переносу раздела "Информация о пользователе" в хедере
|
||
|
||
## Общая структура в 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. |