123 lines
5.0 KiB
Markdown
123 lines
5.0 KiB
Markdown
# SferaV - Система управления бизнесом
|
||
|
||
Красивое приложение для авторизации и управления кабинетами Фулфилмент и Wildberries с современным фиолетовым дизайном.
|
||
|
||
## ✨ Особенности
|
||
|
||
- 🎨 **Современный UI/UX** - Фиолетовые градиенты и стеклянный эффект
|
||
- 📱 **Адаптивный дизайн** - Отлично работает на всех устройствах
|
||
- 🔐 **Многоэтапная авторизация** - Номер телефона → SMS → Выбор кабинета → Данные
|
||
- 📞 **Умная маска телефона** - Автоформатирование номера +7 (999) 999-99-99
|
||
- 💼 **Два типа кабинетов** - Фулфилмент (ИНН) и Wildberries (API ключ)
|
||
- ⚡ **Быстрая навигация** - Плавные переходы между этапами
|
||
|
||
## 🛠 Технологии
|
||
|
||
- **Next.js 15** - React фреймворк
|
||
- **TypeScript** - Типизация
|
||
- **Tailwind CSS 4** - Стилизация
|
||
- **shadcn/ui** - UI компоненты
|
||
- **react-input-mask** - Маска ввода
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
1. **Установка зависимостей:**
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. **Запуск приложения:**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
3. **Откройте браузер:**
|
||
```
|
||
http://localhost:3000
|
||
```
|
||
|
||
## 📱 Этапы авторизации
|
||
|
||
### 1. Ввод номера телефона
|
||
- Красивая маска ввода с автоформатированием
|
||
- Валидация российских номеров (+7)
|
||
- Плавная анимация при вводе
|
||
|
||
### 2. Подтверждение SMS
|
||
- 4 отдельных поля для цифр кода
|
||
- Автопереключение между полями
|
||
- Возможность вернуться к изменению номера
|
||
|
||
### 3. Выбор типа кабинета
|
||
- Фулфилмент кабинет (складские операции)
|
||
- Wildberries кабинет (маркетплейс)
|
||
- Интерактивные карточки с описанием
|
||
|
||
### 4. Ввод данных
|
||
- **Фулфилмент:** ИНН организации (10-12 цифр)
|
||
- **Wildberries:** API ключ с инструкцией получения
|
||
|
||
## 🎨 Дизайн
|
||
|
||
- **Цветовая схема:** Фиолетовые градиенты
|
||
- **Эффекты:** Стеклянные поверхности, размытие
|
||
- **Анимации:** Плавные переходы и hover эффекты
|
||
- **Типографика:** Современные шрифты с хорошей читаемостью
|
||
|
||
## 📂 Структура проекта
|
||
|
||
```
|
||
src/
|
||
├── app/ # Next.js App Router
|
||
│ ├── globals.css # Глобальные стили
|
||
│ ├── layout.tsx # Основной layout
|
||
│ └── page.tsx # Главная страница
|
||
├── components/
|
||
│ ├── auth/ # Компоненты авторизации
|
||
│ │ ├── auth-flow.tsx # Основной флоу
|
||
│ │ ├── auth-layout.tsx # Layout для этапов
|
||
│ │ ├── phone-step.tsx # Ввод телефона
|
||
│ │ ├── sms-step.tsx # Ввод SMS
|
||
│ │ ├── cabinet-select-step.tsx # Выбор кабинета
|
||
│ │ ├── inn-step.tsx # Ввод ИНН
|
||
│ │ └── wb-api-step.tsx # Ввод API ключа WB
|
||
│ └── ui/ # shadcn/ui компоненты
|
||
│ ├── button.tsx
|
||
│ ├── card.tsx
|
||
│ ├── input.tsx
|
||
│ ├── label.tsx
|
||
│ ├── phone-input.tsx
|
||
│ └── select.tsx
|
||
└── lib/
|
||
└── utils.ts # Утилиты
|
||
```
|
||
|
||
## 🔧 Настройка
|
||
|
||
### Цвета
|
||
Фиолетовая тема настроена в `src/app/globals.css` с использованием CSS переменных oklch.
|
||
|
||
### Компоненты
|
||
Все UI компоненты основаны на shadcn/ui и адаптированы под дизайн системы.
|
||
|
||
## 📝 Будущие улучшения
|
||
|
||
- [ ] Интеграция с реальным API для SMS
|
||
- [ ] Сохранение состояния в localStorage
|
||
- [ ] Темная/светлая темы
|
||
- [ ] Интернационализация (i18n)
|
||
- [ ] Мобильное приложение
|
||
- [ ] Анимации между этапами
|
||
|
||
## 🤝 Вклад в проект
|
||
|
||
Приветствуются все улучшения! Создавайте issues и pull requests.
|
||
|
||
## 📄 Лицензия
|
||
|
||
MIT License - используйте свободно!
|
||
|
||
---
|
||
|
||
Сделано с ❤️ для удобной работы с маркетплейсами
|