136 lines
3.1 KiB
Markdown
136 lines
3.1 KiB
Markdown
# AI Review Frontend
|
||
|
||
React + TypeScript + Vite frontend для AI Code Review Agent.
|
||
|
||
## Установка
|
||
|
||
```bash
|
||
# Установите зависимости
|
||
npm install
|
||
```
|
||
|
||
## Настройка
|
||
|
||
Создайте `.env` файл (опционально):
|
||
|
||
```env
|
||
VITE_API_URL=http://localhost:8000
|
||
VITE_WS_URL=ws://localhost:8000
|
||
```
|
||
|
||
По умолчанию используется proxy в `vite.config.ts`, так что можно не создавать `.env`.
|
||
|
||
## Запуск
|
||
|
||
```bash
|
||
# Dev сервер
|
||
npm run dev
|
||
|
||
# Откроется на http://localhost:5173
|
||
```
|
||
|
||
## Сборка
|
||
|
||
```bash
|
||
# Production сборка
|
||
npm run build
|
||
|
||
# Предпросмотр
|
||
npm run preview
|
||
```
|
||
|
||
## Структура
|
||
|
||
```
|
||
src/
|
||
├── api/ # API клиент
|
||
│ ├── client.ts # REST API
|
||
│ └── websocket.ts # WebSocket
|
||
├── components/ # React компоненты
|
||
│ ├── WebSocketStatus.tsx
|
||
│ ├── RepositoryForm.tsx
|
||
│ ├── RepositoryList.tsx
|
||
│ ├── ReviewProgress.tsx
|
||
│ ├── ReviewList.tsx
|
||
│ └── CommentsList.tsx
|
||
├── pages/ # Страницы
|
||
│ ├── Dashboard.tsx
|
||
│ ├── Repositories.tsx
|
||
│ ├── Reviews.tsx
|
||
│ └── ReviewDetail.tsx
|
||
├── types/ # TypeScript типы
|
||
│ └── index.ts
|
||
├── App.tsx # Главный компонент
|
||
├── main.tsx # Entry point
|
||
└── index.css # Стили
|
||
```
|
||
|
||
## Технологии
|
||
|
||
- **React 18** - UI библиотека
|
||
- **TypeScript** - типизация
|
||
- **Vite** - сборщик
|
||
- **React Router** - роутинг
|
||
- **TanStack Query** - управление состоянием сервера
|
||
- **Tailwind CSS** - стилизация
|
||
- **date-fns** - работа с датами
|
||
|
||
## Страницы
|
||
|
||
### Dashboard `/`
|
||
- Статистика ревью
|
||
- Последние ревью
|
||
- Real-time обновления
|
||
|
||
### Repositories `/repositories`
|
||
- Список репозиториев
|
||
- Добавление нового
|
||
- Webhook URL для настройки
|
||
|
||
### Reviews `/reviews`
|
||
- История всех ревью
|
||
- Фильтры по статусу
|
||
- Детали по клику
|
||
|
||
### Review Detail `/reviews/:id`
|
||
- Информация о PR
|
||
- Прогресс ревью
|
||
- Список комментариев
|
||
- Повтор при ошибке
|
||
|
||
## Real-time обновления
|
||
|
||
WebSocket подключается автоматически при запуске приложения.
|
||
|
||
События:
|
||
- `review_started` - начало ревью
|
||
- `review_progress` - прогресс
|
||
- `review_completed` - завершение
|
||
|
||
## Разработка
|
||
|
||
```bash
|
||
# Линтинг
|
||
npm run lint
|
||
|
||
# Проверка типов
|
||
npx tsc --noEmit
|
||
```
|
||
|
||
## Proxy настройка
|
||
|
||
В `vite.config.ts` настроен proxy для API и WebSocket:
|
||
|
||
```ts
|
||
proxy: {
|
||
'/api': 'http://localhost:8000',
|
||
'/ws': {
|
||
target: 'ws://localhost:8000',
|
||
ws: true,
|
||
},
|
||
}
|
||
```
|
||
|
||
Это позволяет делать запросы к `/api/...` без указания полного URL.
|
||
|