mirror of
https://gitverse.ru/kpa39l/yaru.nixg.ru.git
synced 2026-09-29 18:05:05 +00:00
95 lines
4.4 KiB
Markdown
95 lines
4.4 KiB
Markdown
# Frontend документация
|
||
|
||
## Стек технологий
|
||
|
||
| Компонент | Технология | Примечание |
|
||
|-----------|------------|------------|
|
||
| Фреймворк | Svelte 4+ | Проверка достаточности возможностей |
|
||
| Язык | TypeScript | Строгая типизация |
|
||
| Сборщик | Vite | Быстрая разработка |
|
||
| Стили | SCSS + CSS Modules | Или Tailwind CSS |
|
||
| Состояние | Svelte Stores | Или Zustand-like решение |
|
||
| Роутинг | SvelteKit | Если нужен SSR |
|
||
|
||
---
|
||
|
||
## Требования к фронтенду
|
||
|
||
### 1. Основные страницы
|
||
|
||
- [ ] **Лента (Home)** — посты подписок, бесконечный скролл
|
||
- [ ] **Публичная лента** — все посты сервера
|
||
- [ ] **Профиль пользователя** — аватар, био, карма, посты
|
||
- [ ] **Создание поста** — текстовый редактор + загрузка медиа
|
||
- [ ] **Пост (детальный просмотр)** — комментарии, лайки, репосты
|
||
- [ ] **Подписки/Подписчики** — списки пользователей
|
||
- [ ] **Настройки** — профиль, безопасность, экспорт данных
|
||
|
||
### 2. Компоненты интерфейса
|
||
|
||
- [ ] `PostCard` — отображение поста (текст, медиа, карма)
|
||
- [ ] `UserProfile` — карточка пользователя
|
||
- [ ] `Composer` — форма создания поста
|
||
- [ ] `Timeline` — лента постов с пагинацией
|
||
- [ ] `MediaGallery` — галерея изображений/видео
|
||
- [ ] `KarmaDisplay` — отображение кармы
|
||
- [ ] `FollowButton` — кнопка подписки/отписки
|
||
|
||
### 3. Интеграция с редактором
|
||
|
||
**Временно**: Используем готовые решения:
|
||
- [ ] TipTap — расширяемый WYSIWYG редактор
|
||
- [ ] Quill — простой редактор с Markdown поддержкой
|
||
- [ ] Markdown textarea — резервный вариант
|
||
|
||
**В будущем**: Интеграция с Chronicle.nixg.ru
|
||
|
||
### 4. Управление состоянием
|
||
|
||
- [ ] Глобальное состояние: текущий пользователь, настройки
|
||
- [ ] Кэш постов: оптимистичное обновление UI
|
||
- [ ] Real-time обновления: WebSocket для новых постов
|
||
|
||
### 5. Адаптивный дизайн
|
||
|
||
- [ ] Mobile first подход
|
||
- [ ] Поддержка тёмной темы
|
||
- [ ] PWA возможности (оффлайн режим, push уведомления)
|
||
|
||
### 6. Экспорт данных (UI)
|
||
|
||
- [ ] Кнопка "Экспортировать мои данные" в настройках
|
||
- [ ] Прогресс-бар экспорта
|
||
- [ ] Скачивание ZIP архива с контентом
|
||
|
||
---
|
||
|
||
## Вопросы для проверки Svelte
|
||
|
||
- [ ] Хватит ли Svelte Stores для сложного состояния (лента + real-time)?
|
||
- [ ] Нужен ли SSR через SvelteKit для SEO?
|
||
- [ ] Поддержка WebSocket в Svelte (для live обновлений)?
|
||
- [ ] Производительность при большом количестве постов в ленте?
|
||
|
||
---
|
||
|
||
## План разработки фронтенда
|
||
|
||
1. [ ] Настройка Svelte + Vite + TypeScript
|
||
2. [ ] Базовая структура проекта (роуты, layout)
|
||
3. [ ] Компоненты: PostCard, UserProfile, Timeline
|
||
4. [ ] Интеграция с REST API бэкенда
|
||
5. [ ] Страница создания поста (редактор + медиа)
|
||
6. [ ] Real-time обновления (WebSocket)
|
||
7. [ ] Экспорт данных (UI + download)
|
||
8. [ ] Адаптивность + тёмная тема
|
||
|
||
---
|
||
|
||
## Вопросы для обсуждения
|
||
|
||
- [ ] Нужен ли SSR (SvelteKit) или достаточно SPA?
|
||
- [ ] Какой редактор выбрать для MVP (TipTap/Quill/Markdown)?
|
||
- [ ] Требуется ли поддержка PWA (оффлайн, push)?
|
||
- [ ] Нужна ли локализация интерфейса (только русский или мультиязычность)?
|