Код mobile frontend находится в mobile_around.
cd mobile_around
npm install
npm run dev
npm run build
npx cap sync
Файл .env.example:
VITE_API_BASE_URL=http://localhost:8000/api/v1
Для локального backend compose обычно нужен:
VITE_API_BASE_URL=http://localhost:8999/api/v1
POST /auth/registerPOST /auth/loginPOST /auth/verify-codeGET /auth/users/me/POST /auth/logoutДизайн-система mobile frontend находится в mobile_around/src/styles и mobile_around/src/components/ds.
Основные файлы:
src/styles/tokens.css - базовые CSS-токены: шрифты, цвета, вертикальный темп, радиусы, тени.src/styles/main.css - глобальные стили, layout-утилиты и типографические классы.tailwind.config.ts - проброс токенов в Tailwind: цвета, spacing, radii, shadows, font families, font sizes.src/components/ds - переиспользуемые DS-компоненты.В компонентах не добавляем самописные CSS-переменные и hardcoded-значения для базовых дизайн-сущностей. Используем:
tailwind.config.ts;src/styles/main.css;src/styles/tokens.css, если значение нужно внутри обычного CSS.Например:
<div class="bg-surface px-screen-x py-tempo-24 text-ink">
<h1 class="typo-h1">Заголовок</h1>
<p class="typo-main-1 text-ink-muted">Основной текст</p>
</div>
Базовая палитра заведена RGB-токенами в tokens.css:
| Token | Hex | Назначение |
|---|---|---|
--color-white |
#FFFFFF |
белый |
--color-light-bluewhite |
#F2F0FF |
общий фон приложения |
--color-light-peach |
#F8E6DD |
светлый акцент |
--color-peach |
#F5A253 |
теплый акцент |
--color-light-pink |
#FAE2F7 |
светлый розовый акцент |
--color-pink |
#DC8DD6 |
розовый акцент |
--color-light-purple |
#ECE2FF |
светлый брендовый фон |
--color-purple |
#9D74F1 |
основной брендовый цвет |
--color-light-mint |
#D9F5EB |
светлый success-фон |
--color-green |
#6AB99D |
success |
--color-light-grey |
#CACFD9 |
muted/disabled |
--color-grey |
#B3B9C4 |
вторичный текст/границы |
--color-dark-grey |
#2F3135 |
основной текст |
--color-red |
#FF5656 |
error/danger |
--color-overlay |
#000000 |
overlay, opacity 20% |
В UI предпочтительно использовать семантические Tailwind-цвета:
bg-canvas - фон приложения.bg-surface - поверхности и панели.text-ink - основной текст.text-ink-muted - вторичный текст.text-ink-inverse - текст на темном/брендовом фоне.border-border - стандартная граница.bg-brand, text-brand, border-brand - основной брендовый цвет.bg-brand-soft - мягкий брендовый фон.bg-danger, text-danger, bg-danger-soft - ошибки.bg-success, text-success, bg-success-soft - успешные состояния.Прямые палитровые классы (bg-purple, text-grey, bg-light-pink и т.д.) допустимы, когда нужен конкретный цвет из макета, а не семантическая роль.
Вертикальный темп задан токенами:
| Token | Tailwind class | Value |
|---|---|---|
--tempo-4 |
*-tempo-4 |
4px |
--tempo-8 |
*-tempo-8 |
8px |
--tempo-12 |
*-tempo-12 |
12px |
--tempo-24 |
*-tempo-24 |
24px |
--tempo-32 |
*-tempo-32 |
32px |
--tempo-64 |
*-tempo-64 |
64px |
--tempo-96 |
*-tempo-96 |
96px |
--tempo-128 |
*-tempo-128 |
128px |
*-tempo-* означает обычные Tailwind spacing-утилиты: p-tempo-24, mt-tempo-8, gap-tempo-12, pb-tempo-32 и т.д.
Для экранных отступов используем:
px-screen-x / mx-screen-x / -mx-screen-x - горизонтальный экранный отступ.py-screen-y, pt-screen-y, pb-screen-y - базовый вертикальный отступ.Для safe area и нижней навигации есть готовые утилиты:
app-safe-ptapp-safe-pbapp-safe-pb-lgapp-safe-mbapp-bottom-nav-safe-pbapp-nav-safe-pbapp-nav-safe-mbapp-scroll-areaapp-scroll-area-flushШрифтовые роли:
Poppins.Lato.Типографические классы:
| Class | Роль |
|---|---|
typo-h1 |
Poppins Bold 22px |
typo-h2 |
Poppins Semibold 20px |
typo-h3 |
Poppins Medium 18px |
typo-h4 |
Poppins Medium 16px |
typo-main-1 |
Lato Regular 16px |
typo-main-2 |
Lato Medium 16px |
typo-main-calendar |
Lato Medium 16px |
typo-button |
Poppins Medium 16px |
typo-hint |
Lato Regular 14px |
typo-hint-medium |
Lato Medium 14px |
typo-nav |
navigation label |
В компонентах не используем ручные комбинации text-*, font-*, leading-* для дизайн-системных текстовых ролей. Вместо этого выбираем ближайший typo-* класс.
Радиусы:
rounded-ds-sm - 5px.rounded-ds - 8px.rounded-ds-lg - 10px.Тени:
shadow-ds-soft - легкая тень.shadow-ds - стандартная тень поверхности.shadow-ds-bottom-nav - тень нижней навигации.Фокус:
ds-focus добавляет единый focus-visible ring через токен --focus-ring.DS-компоненты лежат в src/components/ds. Новые общие элементы интерфейса сначала стоит оформлять как DS-компоненты, если они повторяются в нескольких местах или задают общий паттерн поведения/визуала.
Для иконок в кнопках и контролах используем существующую иконографику проекта или SVG без текстовых псевдосимволов. Не используем символы вроде ×, +, -, ‹ как UI-иконки, если это интерактивный контрол.