generated from VLADIMIR/template_frontend
101 lines
5.5 KiB
Markdown
101 lines
5.5 KiB
Markdown
# Вечерний детектив
|
|
|
|
Онлайн-детективная игра: команды проходят «дело» — сценарий из точек, дверей, ключей и улик.
|
|
Фронтенд в стиле «кабинета сыщика»: тёмная тема, «бумажные листы дел» с текстурой и шрифтом печатной машинки.
|
|
|
|
## Стек
|
|
|
|
- **Vue 3.5** (`<script setup lang="ts">`) + **TypeScript**
|
|
- **Vite 8** (сборка, dev-сервер)
|
|
- **Pinia 3** (состояние), **Vue Router 5** (роутинг, ленивая загрузка страниц)
|
|
- **Naive UI** (тёмная тема) + **@vicons** (иконки)
|
|
- **axios** — HTTP-клиент; API-клиенты генерируются из `proto/main.proto` (см. «API-клиенты»)
|
|
|
|
## Требования
|
|
|
|
- Node.js 20.19+ или 22.12+ (требование Vite 8)
|
|
- npm
|
|
|
|
## Быстрый старт
|
|
|
|
```sh
|
|
npm install
|
|
cp .env.example .env # при необходимости (см. «Переменные окружения»)
|
|
npm run dev
|
|
```
|
|
|
|
Dev-сервер поднимется с `--host`, порт по умолчанию — 5173.
|
|
|
|
> Для работы с данными нужен запущенный бэкенд: API-клиент обращается к `VITE_API_URL`
|
|
> (см. `.env.example`; при отсутствии переменной используется `http://localhost:8090`).
|
|
> Без бэкенда страницы откроются, но данные не загрузятся.
|
|
|
|
## Команды
|
|
|
|
| Команда | Назначение |
|
|
| -------------------- | --------------------------------------------------------------------------- |
|
|
| `npm run dev` | dev-сервер (Vite, `--host`) |
|
|
| `npm run build` | type-check + сборка продакшена (через `run-p`) |
|
|
| `npm run build-only` | только сборка (`vite build`) |
|
|
| `npm run preview` | локальный предпросмотр собранного `dist` (после `npm run build`) |
|
|
| `npm run type-check` | проверка типов (`vue-tsc --build`) |
|
|
| `npm run lint` | ESLint по всему проекту с автофиксами |
|
|
| `npm run lint:css` | Stylelint по `src/**/*.{css,scss,vue}` с автофиксами (свойства по алфавиту) |
|
|
| `npm run format` | Prettier по всему проекту (`prettier --write .`, см. `.prettierignore`) |
|
|
| `npm run proto:gen` | генерация API-клиентов из proto (нужен установленный `protoc` + плагин) |
|
|
|
|
## Переменные окружения
|
|
|
|
Скопируйте `.env.example` в `.env` и при необходимости измените:
|
|
|
|
| Переменная | Назначение |
|
|
| ---------------- | ------------------------------------------------------------------------------------- |
|
|
| `VITE_API_URL` | базовый URL бэкенда (пример: `http://localhost:8080`) |
|
|
| `VITE_APP_TITLE` | резервируется под название приложения (сейчас заголовок вкладки задан в `index.html`) |
|
|
|
|
## Структура проекта
|
|
|
|
```
|
|
src/
|
|
├── views/ — тонкие обёртки страниц (*View.vue → <Page />)
|
|
├── components/ — страницы (*Page.vue) и переиспользуемые блоки
|
|
├── router/ — маршруты (ленивая загрузка страниц)
|
|
├── api/ — клиенты API + generated/ (сгенерированный код)
|
|
├── stores/ — Pinia-стора
|
|
├── composables/ — переиспользуемая логика (например, useSimplePolling)
|
|
├── utils/ — утилиты
|
|
├── types/ — типы
|
|
└── assets/ — css, шрифты, изображения
|
|
```
|
|
|
|
Алиас `@/` → `src/`. Импорты: `@/components/...` для общих блоков, относительные для соседних файлов.
|
|
|
|
## API-клиенты
|
|
|
|
Клиенты генерируются из `proto/main.proto` (grpc-gateway) в `src/api/generated/**`:
|
|
|
|
```sh
|
|
npm run proto:gen
|
|
```
|
|
|
|
**Сгенерированный код руками не редактировать** — обновляется только через `npm run proto:gen`.
|
|
Использовать клиенты только через обёртки (`getAuthClient()` и т.п. из `src/api/`).
|
|
|
|
## Деплой
|
|
|
|
`docker-compose.yml` поднимает статический HTTP-сервер, который отдаёт собранный `dist` (SPA-режим) на порту 8100:
|
|
|
|
```sh
|
|
npm run build
|
|
docker-compose up -d
|
|
# приложение: http://localhost:8100
|
|
```
|
|
|
|
## Конвенции
|
|
|
|
Подробные правила работы с кодом (структура, импорты, дизайн-канон «бумажного детектива», палитра) — в [`AGENTS.md`](AGENTS.md).
|
|
|
|
## Рекомендуемые расширения VSCode
|
|
|
|
См. `.vscode/extensions.json`: Volar, ESLint, EditorConfig, Prettier.
|