Константин Лебединский
2 weeks ago
commit
3dec3ea720
75 changed files with 13806 additions and 0 deletions
@ -0,0 +1,9 @@
|
||||
**/node_modules |
||||
**/.git |
||||
**/.env |
||||
**/.env.* |
||||
!**/.env.example |
||||
**/dist |
||||
**/*.db |
||||
**/*.db-journal |
||||
.DS_Store |
||||
@ -0,0 +1,19 @@
|
||||
# Скопируйте в `.env` в корне репозитория для `docker compose up` |
||||
APP_PORT=3000 |
||||
POSTGRES_USER=edu |
||||
POSTGRES_PASSWORD=edu |
||||
POSTGRES_DB=edu_helper |
||||
|
||||
JWT_SECRET=замените-на-длинную-случайную-строку-минимум-32-символа |
||||
|
||||
# Пароли первичных пользователей (только при пустой таблице User) |
||||
SEED_TUTOR_USERNAME=alexey |
||||
SEED_STUDENT_USERNAME=konstantin |
||||
SEED_TUTOR_PASSWORD= |
||||
SEED_STUDENT_PASSWORD= |
||||
|
||||
# Опционально: положить ключ сюда, чтобы не заходить в настройки после деплоя |
||||
DEEPSEEK_API_KEY= |
||||
|
||||
# Cookie с флагом Secure только при HTTPS (иначе авторизация по http:// не работает) |
||||
# COOKIE_SECURE=true |
||||
@ -0,0 +1,6 @@
|
||||
node_modules/ |
||||
dist/ |
||||
.env |
||||
*.db |
||||
generated/ |
||||
.DS_Store |
||||
@ -0,0 +1,29 @@
|
||||
FROM node:22-alpine AS frontend-build |
||||
WORKDIR /app/frontend |
||||
COPY frontend/package.json frontend/package-lock.json ./ |
||||
RUN npm ci |
||||
COPY frontend/ ./ |
||||
RUN npm run build |
||||
|
||||
FROM node:22-alpine AS backend-build |
||||
WORKDIR /app/backend |
||||
COPY backend/package.json backend/package-lock.json ./ |
||||
RUN npm ci |
||||
COPY backend/ ./ |
||||
RUN npx prisma generate |
||||
RUN npm run build |
||||
|
||||
FROM node:22-alpine |
||||
RUN apk add --no-cache openssl libc6-compat |
||||
WORKDIR /app |
||||
ENV NODE_ENV=production |
||||
COPY --from=backend-build /app/backend/dist ./dist |
||||
COPY --from=backend-build /app/backend/node_modules ./node_modules |
||||
COPY --from=backend-build /app/backend/prisma ./prisma |
||||
COPY --from=backend-build /app/backend/package.json ./package.json |
||||
COPY --from=frontend-build /app/frontend/dist ./public |
||||
COPY docker-entrypoint.sh /docker-entrypoint.sh |
||||
RUN chmod +x /docker-entrypoint.sh |
||||
EXPOSE 3000 |
||||
ENTRYPOINT ["/docker-entrypoint.sh"] |
||||
CMD ["node", "dist/index.js"] |
||||
@ -0,0 +1,118 @@
|
||||
# Edu Helper |
||||
|
||||
Веб-приложение для обучения с ИИ: чат, вопросы, учебники, тесты, «Зал» с фотографиями по датам. Два типа пользователей — **наставник** и **ученик** (роли и связка наставник ↔ ученик задаются в БД). |
||||
|
||||
## Стек |
||||
|
||||
- **Frontend:** React 19, Vite, TypeScript, Tailwind CSS |
||||
- **Backend:** Node.js, Express, Prisma ORM |
||||
- **БД:** PostgreSQL 16 |
||||
- **ИИ:** DeepSeek API (ключ в настройках или переменной окружения) |
||||
- **Деплой:** Docker Compose (один контейнер с API + статикой фронта, отдельно Postgres) |
||||
|
||||
## Требования |
||||
|
||||
- [Docker](https://docs.docker.com/get-docker/) и Docker Compose (для продакшен-сборки) |
||||
- или **Node.js 22+** и локальный PostgreSQL (для разработки без Docker) |
||||
|
||||
## Быстрый старт (Docker) |
||||
|
||||
1. Склонируйте репозиторий и перейдите в каталог проекта. |
||||
|
||||
2. Создайте файл `.env` в **корне** репозитория (можно скопировать шаблон): |
||||
|
||||
```bash |
||||
cp .env.docker.example .env |
||||
``` |
||||
|
||||
3. Отредактируйте `.env`: |
||||
- задайте **`JWT_SECRET`** — длинная случайная строка (не короткий пароль); |
||||
- задайте **`SEED_TUTOR_PASSWORD`** и **`SEED_STUDENT_PASSWORD`** — пароли первых пользователей (создаются только при пустой таблице `User`); |
||||
- при необходимости укажите **`DEEPSEEK_API_KEY`**; |
||||
- для работы по **HTTPS** за прокси выставьте **`COOKIE_SECURE=true`**; для обычного **http://localhost** оставьте **`COOKIE_SECURE=false`**, иначе cookie с сессией не установится. |
||||
|
||||
4. Запуск: |
||||
|
||||
```bash |
||||
docker compose up -d --build |
||||
``` |
||||
|
||||
5. Откройте в браузере: **http://localhost:3000** (или порт из `APP_PORT` в `.env`). |
||||
|
||||
6. Проверка API: |
||||
|
||||
```bash |
||||
curl http://localhost:3000/api/health |
||||
``` |
||||
|
||||
При первом старте контейнер приложения выполняет `prisma migrate deploy` и сид пользователей (если пользователей ещё нет). |
||||
|
||||
### Тома данных |
||||
|
||||
- **`pgdata`** — данные PostgreSQL. Пароль пользователя БД задаётся в **`POSTGRES_PASSWORD`** только при **первом** создании тома. Если сменить пароль в `.env` позже, сам PostgreSQL **не** пересоздаст пароль автоматически — приложение не подключится (ошибка Prisma `P1000`). Варианты: вернуть в `.env` старый пароль, либо сменить пароль вручную в Postgres, либо **один раз** пересоздать том (данные БД пропадут): |
||||
|
||||
```bash |
||||
docker compose down -v |
||||
docker compose up -d --build |
||||
``` |
||||
|
||||
- **`uploads`** — загруженные файлы «Зала». |
||||
|
||||
## Локальная разработка (без Docker) |
||||
|
||||
1. Поднимите PostgreSQL и создайте базу (например `edu_helper`). |
||||
|
||||
2. В каталоге **`backend`** создайте `.env` с `DATABASE_URL` и остальными переменными по аналогии с корневым `.env.docker.example`. |
||||
|
||||
3. Установка и миграции: |
||||
|
||||
```bash |
||||
cd backend && npm ci && npx prisma migrate deploy |
||||
``` |
||||
|
||||
4. Запуск бэкенда (по умолчанию порт **3001**): |
||||
|
||||
```bash |
||||
npm run dev |
||||
``` |
||||
|
||||
5. В другом терминале — фронт: |
||||
|
||||
```bash |
||||
cd frontend && npm ci && npm run dev |
||||
``` |
||||
|
||||
Vite откроется на **http://localhost:5173**; запросы к `/api` проксируются на бэкенд (см. `frontend/vite.config.ts`). |
||||
|
||||
Корневой скрипт **`npm run dev`** (из корня репозитория, после `npm install` в корне) поднимает backend и frontend одновременно через `concurrently`. |
||||
|
||||
## Структура репозитория |
||||
|
||||
| Путь | Назначение | |
||||
|------|------------| |
||||
| `frontend/` | SPA (React + Vite) | |
||||
| `backend/` | API, Prisma-схема и миграции | |
||||
| `Dockerfile` | Сборка фронта и бэка, один образ Node | |
||||
| `docker-compose.yml` | Сервисы `app` и `db`, тома `pgdata` и `uploads` | |
||||
| `docker-entrypoint.sh` | Миграции Prisma и сид перед стартом Node | |
||||
| `.env.docker.example` | Шаблон переменных для Docker | |
||||
|
||||
Файл **`.env`** в git не коммитится (см. `.gitignore`). |
||||
|
||||
## Переменные окружения (кратко) |
||||
|
||||
| Переменная | Описание | |
||||
|------------|----------| |
||||
| `POSTGRES_*` | Пользователь, пароль и имя БД для контейнера Postgres | |
||||
| `DATABASE_URL` | Строка подключения Prisma (в Docker задаётся из `POSTGRES_*`) | |
||||
| `JWT_SECRET` | Секрет подписи JWT (обязательно задать) | |
||||
| `SEED_*_USERNAME` / `SEED_*_PASSWORD` | Логины и пароли для первичного сида | |
||||
| `DEEPSEEK_API_KEY` | Опционально: ключ API по умолчанию | |
||||
| `COOKIE_SECURE` | `true` только при HTTPS | |
||||
| `APP_PORT` | Проброс порта хоста на контейнер приложения (по умолчанию 3000) | |
||||
|
||||
Полный список и комментарии — в **`.env.docker.example`**. |
||||
|
||||
## Лицензия |
||||
|
||||
Укажите лицензию при необходимости (файл `LICENSE`). |
||||
@ -0,0 +1,32 @@
|
||||
# Спринт: сервер, Docker, Postgres, роли |
||||
|
||||
## Обязательные требования |
||||
|
||||
- **Docker**: образ приложения + `docker-compose` с PostgreSQL; один контейнер отдаёт API и статику фронтенда. |
||||
- **PostgreSQL** вместо SQLite; Prisma-миграции при старте контейнера (`migrate deploy`). |
||||
- **Два аккаунта** (логины/пароли из переменных окружения при первом запуске): наставник **Алексей**, ученик **Константин**; связь «наставник ведёт ученика» в БД. |
||||
- **Алексей** видит и создаёт контент для Константина (чат, вопросы, учебники, тесты, отчёты). |
||||
- **Константин** удаляет **только свои** вопросы (`DELETE` только для роли STUDENT и только при совпадении `studentId`); наставник удалять вопросы не может. |
||||
- **Настройки** (ключ API, промпты): только наставник (`GET /raw`, `PUT`). |
||||
|
||||
## Статус реализации |
||||
|
||||
См. коммит(ы) в репозитории после этой спецификации: `Dockerfile`, `docker-compose.yml`, `SPRINT.md`, обновлённые `schema.prisma`, auth, защита роутов, UI логина и удаления вопросов. |
||||
|
||||
## Запуск в Docker (обязательная упаковка) |
||||
|
||||
```bash |
||||
cp .env.docker.example .env |
||||
# Заполните JWT_SECRET, SEED_TUTOR_PASSWORD, SEED_STUDENT_PASSWORD; при желании DEEPSEEK_API_KEY |
||||
docker compose up --build |
||||
``` |
||||
|
||||
Приложение: http://localhost:3000 (логины по умолчанию `alexey` / `konstantin`, см. `SEED_*_USERNAME`). |
||||
|
||||
Файл-пример переменных: [.env.docker.example](.env.docker.example). |
||||
|
||||
## Локальная разработка |
||||
|
||||
- Поднять Postgres (или `docker compose up db -d`). |
||||
- `DATABASE_URL=postgresql://...` в `backend/.env`. |
||||
- `npm run dev` из корня (как раньше: backend :3001, frontend :5173 с прокси). |
||||
@ -0,0 +1,730 @@
|
||||
# Учебник: Как устроен EduHelper |
||||
|
||||
Это пошаговый учебник для начинающего программиста. Здесь подробно объяснено, как работает каждая часть проекта EduHelper — веб-приложения для обучения с ИИ-ассистентом. |
||||
|
||||
--- |
||||
|
||||
## Оглавление |
||||
|
||||
1. [Что такое веб-приложение и как оно устроено](#1-что-такое-веб-приложение) |
||||
2. [Архитектура: Frontend vs Backend](#2-архитектура-frontend-vs-backend) |
||||
3. [Backend: Express.js — наш сервер](#3-backend-expressjs) |
||||
4. [База данных: SQLite + Prisma](#4-база-данных-sqlite--prisma) |
||||
5. [Frontend: React + Vite](#5-frontend-react--vite) |
||||
6. [Компоненты UI: Shadcn подход](#6-компоненты-ui-shadcn) |
||||
7. [Маршрутизация (роутинг)](#7-маршрутизация) |
||||
8. [Как фронтенд общается с бэкендом](#8-как-фронтенд-общается-с-бэкендом) |
||||
9. [Интеграция с ИИ (DeepSeek)](#9-интеграция-с-ии-deepseek) |
||||
10. [Стриминг ответов (SSE)](#10-стриминг-ответов-sse) |
||||
|
||||
--- |
||||
|
||||
## 1. Что такое веб-приложение |
||||
|
||||
Веб-приложение — это программа, которая работает в браузере. В отличие от обычного сайта, она **интерактивна**: вы можете нажимать кнопки, заполнять формы, получать ответы — всё без перезагрузки страницы. |
||||
|
||||
EduHelper — веб-приложение, которое позволяет: |
||||
- Задавать вопросы ИИ-ассистенту |
||||
- Генерировать учебники по любой теме |
||||
- Проходить тесты |
||||
- Получать ежедневные отчёты об обучении |
||||
|
||||
### Как это работает в общих чертах |
||||
|
||||
``` |
||||
[Браузер (Chrome)] <--HTTP запросы--> [Сервер (Express)] <--SQL запросы--> [База данных (SQLite)] |
||||
| |
||||
v |
||||
[DeepSeek API] (ИИ в облаке) |
||||
``` |
||||
|
||||
1. Вы открываете сайт в браузере |
||||
2. Браузер показывает интерфейс (это **frontend**) |
||||
3. Когда нужны данные, браузер отправляет запрос на сервер (это **backend**) |
||||
4. Сервер достаёт данные из базы данных или обращается к ИИ |
||||
5. Сервер отправляет ответ обратно в браузер |
||||
6. Браузер обновляет интерфейс |
||||
|
||||
--- |
||||
|
||||
## 2. Архитектура: Frontend vs Backend |
||||
|
||||
В нашем проекте фронтенд и бэкенд **живут в разных папках** — это называется «разделённая архитектура»: |
||||
|
||||
``` |
||||
Edu_helper/ |
||||
├── backend/ ← Серверная часть (обработка данных, работа с БД и ИИ) |
||||
├── frontend/ ← Клиентская часть (интерфейс, кнопки, формы) |
||||
└── TEXTBOOK.md ← Этот учебник |
||||
``` |
||||
|
||||
### Зачем разделять? |
||||
|
||||
| Преимущество | Пояснение | |
||||
|---|---| |
||||
| **Понятность** | Серверный и клиентский код не перемешаны. Легче найти нужный файл | |
||||
| **Независимость** | Можно менять фронтенд, не трогая бэкенд, и наоборот | |
||||
| **Масштабирование** | В будущем можно запустить несколько бэкендов или поменять фронтенд на мобильное приложение | |
||||
| **Командная работа** | Один разработчик делает фронтенд, другой — бэкенд | |
||||
|
||||
### Как они общаются? |
||||
|
||||
Через **HTTP-запросы** (API). Фронтенд отправляет запрос на адрес вроде `http://localhost:3001/api/questions`, а бэкенд возвращает данные в формате JSON. |
||||
|
||||
--- |
||||
|
||||
## 3. Backend: Express.js |
||||
|
||||
### Что такое Express.js? |
||||
|
||||
Express — это **фреймворк** (набор готовых инструментов) для создания серверов на Node.js. Он позволяет легко описать: «когда приходит запрос на такой-то адрес, делай вот это». |
||||
|
||||
### Структура нашего бэкенда |
||||
|
||||
``` |
||||
backend/ |
||||
├── src/ |
||||
│ ├── index.ts ← Точка входа. Здесь создаётся и настраивается сервер |
||||
│ ├── routes/ ← Маршруты (какой запрос куда ведёт) |
||||
│ │ ├── settings.ts ← /api/settings — настройки приложения |
||||
│ │ ├── chat.ts ← /api/chat — чат с ИИ |
||||
│ │ ├── questions.ts ← /api/questions — ежедневные вопросы |
||||
│ │ ├── textbooks.ts ← /api/textbooks — генерация учебников |
||||
│ │ ├── tests.ts ← /api/tests — тестирование |
||||
│ │ └── reports.ts ← /api/reports — ежедневные отчёты |
||||
│ ├── lib/ ← Вспомогательные модули |
||||
│ │ ├── prisma.ts ← Подключение к базе данных |
||||
│ │ └── deepseek.ts ← Подключение к ИИ (DeepSeek) |
||||
│ └── middleware/ ← Промежуточные обработчики |
||||
│ └── errorHandler.ts ← Обработка ошибок |
||||
├── prisma/ |
||||
│ └── schema.prisma ← Описание структуры базы данных |
||||
├── data/ |
||||
│ └── edu_helper.db ← Файл базы данных SQLite |
||||
├── .env ← Переменные окружения (секретные настройки) |
||||
├── tsconfig.json ← Настройки TypeScript |
||||
└── package.json ← Зависимости проекта и команды запуска |
||||
``` |
||||
|
||||
### Как работает маршрут (Route)? |
||||
|
||||
Маршрут — это правило: «если пришёл запрос такого-то типа на такой-то адрес, выполни такой-то код». |
||||
|
||||
Пример из `routes/settings.ts`: |
||||
```typescript |
||||
router.get("/", async (req, res) => { |
||||
// GET /api/settings — вернуть все настройки |
||||
const settings = await prisma.setting.findMany(); |
||||
res.json(settings); // отправить как JSON |
||||
}); |
||||
|
||||
router.put("/", async (req, res) => { |
||||
// PUT /api/settings — обновить настройки |
||||
const entries = req.body; // данные из запроса |
||||
// ... сохранить в БД ... |
||||
res.json({ success: true }); |
||||
}); |
||||
``` |
||||
|
||||
### Типы HTTP-запросов |
||||
|
||||
| Метод | Для чего | Пример | |
||||
|-------|---------|--------| |
||||
| `GET` | Получить данные | Загрузить список вопросов | |
||||
| `POST` | Создать что-то новое | Сохранить новый вопрос | |
||||
| `PUT` | Обновить существующее | Изменить настройки | |
||||
| `DELETE` | Удалить | Очистить историю чата | |
||||
|
||||
--- |
||||
|
||||
## 4. База данных: SQLite + Prisma |
||||
|
||||
### Что такое база данных? |
||||
|
||||
База данных — это **структурированное хранилище информации**. Представьте таблицу в Excel: |
||||
|
||||
| id | text | answer | date | |
||||
|----|------|--------|------| |
||||
| 1 | Что такое React? | React — это... | 2026-03-27 | |
||||
| 2 | Как работает async? | Async позволяет... | 2026-03-27 | |
||||
|
||||
Каждая **строка** — это одна запись (вопрос). Каждый **столбец** — это поле (свойство). |
||||
|
||||
### SQLite |
||||
|
||||
SQLite — это база данных, которая хранится в **одном файле** (у нас `data/edu_helper.db`). Не нужно ставить отдельную программу — всё работает «из коробки». |
||||
|
||||
### Prisma |
||||
|
||||
Prisma — это **ORM** (Object-Relational Mapping). Она позволяет работать с базой данных **на TypeScript** вместо SQL. |
||||
|
||||
Без Prisma (чистый SQL): |
||||
```sql |
||||
SELECT * FROM Question WHERE date = '2026-03-27'; |
||||
``` |
||||
|
||||
С Prisma (TypeScript): |
||||
```typescript |
||||
const questions = await prisma.question.findMany({ |
||||
where: { date: '2026-03-27' } |
||||
}); |
||||
``` |
||||
|
||||
### Схема базы данных (`schema.prisma`) |
||||
|
||||
Схема описывает, какие таблицы и поля есть в нашей БД: |
||||
|
||||
```prisma |
||||
model Question { |
||||
id Int @id @default(autoincrement()) // уникальный номер, растёт автоматически |
||||
text String // текст вопроса |
||||
answer String? // ответ (? = может быть пустым) |
||||
date String // дата в формате YYYY-MM-DD |
||||
createdAt DateTime @default(now()) // дата создания (автоматически) |
||||
} |
||||
``` |
||||
|
||||
Наши таблицы: |
||||
- **Setting** — настройки (API-ключ, промпты) |
||||
- **ChatMessage** — история чата |
||||
- **Question** — ежедневные вопросы и ответы |
||||
- **Textbook** — сгенерированные учебники |
||||
- **Test** — тесты (вопросы в формате JSON) |
||||
- **TestResult** — результаты прохождения тестов |
||||
- **Report** — ежедневные отчёты |
||||
|
||||
--- |
||||
|
||||
## 5. Frontend: React + Vite |
||||
|
||||
### Что такое React? |
||||
|
||||
React — это библиотека для создания интерфейсов. Главная идея: интерфейс состоит из **компонентов** — переиспользуемых «кирпичиков». |
||||
|
||||
Например, кнопка — это компонент. Карточка — компонент. Вся страница — тоже компонент, собранный из других. |
||||
|
||||
### Что такое Vite? |
||||
|
||||
Vite — это **сборщик** (build tool). Он берёт все ваши файлы TypeScript, React-компоненты, CSS — и собирает их в один пакет, который понимает браузер. Плюс он поддерживает **горячую перезагрузку** — вы сохраняете файл, и браузер обновляется мгновенно. |
||||
|
||||
### Структура нашего фронтенда |
||||
|
||||
``` |
||||
frontend/src/ |
||||
├── main.tsx ← Точка входа. Монтирует React-приложение в HTML |
||||
├── App.tsx ← Корневой компонент с маршрутизацией |
||||
├── index.css ← Глобальные стили и тема |
||||
├── pages/ ← Страницы приложения (по одной на раздел) |
||||
│ ├── HomePage.tsx ← Главная: приветствие + чат |
||||
│ ├── QuestionsPage.tsx ← Ежедневные вопросы |
||||
│ ├── TextbookPage.tsx ← Генерация учебника |
||||
│ ├── TestPage.tsx ← Тестирование |
||||
│ ├── ReportPage.tsx ← Ежедневный отчёт |
||||
│ └── SettingsPage.tsx ← Настройки (ключ, промпты) |
||||
├── components/ ← Переиспользуемые компоненты |
||||
│ ├── Layout.tsx ← Общий каркас: боковое меню + область контента |
||||
│ └── ui/ ← Базовые UI-компоненты (кнопки, инпуты, карточки) |
||||
│ ├── button.tsx |
||||
│ ├── input.tsx |
||||
│ ├── textarea.tsx |
||||
│ ├── card.tsx |
||||
│ └── label.tsx |
||||
└── lib/ ← Утилиты |
||||
└── utils.ts ← Вспомогательные функции (запросы к API, форматирование) |
||||
``` |
||||
|
||||
### Как работает React-компонент? |
||||
|
||||
Компонент — это функция, которая возвращает **JSX** (разметку, похожую на HTML): |
||||
|
||||
```tsx |
||||
function Greeting() { |
||||
const name = "Константин"; |
||||
return <h1>Привет, {name}!</h1>; |
||||
} |
||||
``` |
||||
|
||||
В фигурных скобках `{}` можно писать JavaScript-выражения. |
||||
|
||||
### Состояние (State) |
||||
|
||||
Состояние — это данные, которые могут **меняться**. Когда состояние меняется, React перерисовывает компонент. |
||||
|
||||
```tsx |
||||
const [count, setCount] = useState(0); |
||||
// count — текущее значение (изначально 0) |
||||
// setCount — функция для изменения |
||||
|
||||
<button onClick={() => setCount(count + 1)}> |
||||
Нажали {count} раз |
||||
</button> |
||||
``` |
||||
|
||||
### Эффекты (useEffect) |
||||
|
||||
`useEffect` выполняет код **после** рендера компонента. Используется для загрузки данных, подписок и т.д. |
||||
|
||||
```tsx |
||||
useEffect(() => { |
||||
// Этот код выполнится один раз при первом рендере |
||||
fetch("/api/questions").then(res => res.json()).then(setQuestions); |
||||
}, []); // пустой массив = выполнить только один раз |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 6. Компоненты UI: Shadcn подход |
||||
|
||||
### Что такое Shadcn UI? |
||||
|
||||
Shadcn UI — это **не библиотека**, а **коллекция компонентов**, которые вы копируете прямо в свой проект. Это значит: |
||||
- Вы полностью контролируете код каждого компонента |
||||
- Можно настроить внешний вид под свои нужды |
||||
- Нет «чёрного ящика» — всё прозрачно |
||||
|
||||
### Как устроен компонент Button? |
||||
|
||||
```tsx |
||||
const buttonVariants = cva( |
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium", |
||||
{ |
||||
variants: { |
||||
variant: { |
||||
default: "bg-primary text-primary-foreground", // синяя кнопка |
||||
outline: "border border-input bg-background", // кнопка с рамкой |
||||
ghost: "hover:bg-accent", // прозрачная кнопка |
||||
}, |
||||
size: { |
||||
default: "h-10 px-4 py-2", |
||||
sm: "h-9 px-3", |
||||
lg: "h-11 px-8", |
||||
}, |
||||
}, |
||||
} |
||||
); |
||||
``` |
||||
|
||||
`cva` (class-variance-authority) — утилита для создания **вариантов стилей**. Вместо кучи `if/else` для классов CSS, мы декларативно описываем все варианты. |
||||
|
||||
### Tailwind CSS |
||||
|
||||
Tailwind — это CSS-фреймворк, где стили задаются через **классы** прямо в HTML: |
||||
|
||||
```html |
||||
<!-- Обычный CSS --> |
||||
<div style="display: flex; padding: 16px; background: white; border-radius: 8px;"> |
||||
|
||||
<!-- Tailwind CSS --> |
||||
<div class="flex p-4 bg-white rounded-lg"> |
||||
``` |
||||
|
||||
Каждый класс = одно CSS-свойство. Это быстрее писать и легче менять. |
||||
|
||||
### Двухцветная тема |
||||
|
||||
По требованию заказчика, дизайн в двух цветах (белый + акцентный). Наши цвета определены в `index.css`: |
||||
|
||||
```css |
||||
@theme { |
||||
--color-background: #ffffff; /* белый фон */ |
||||
--color-primary: #2563eb; /* синий — акцентный цвет */ |
||||
--color-foreground: #0f172a; /* тёмный текст */ |
||||
} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 7. Маршрутизация |
||||
|
||||
### Что такое маршрутизация? |
||||
|
||||
Когда вы нажимаете на ссылку «Вопросы», URL меняется на `/questions` и показывается нужная страница. Но **страница не перезагружается** — React Router просто меняет компонент. |
||||
|
||||
```tsx |
||||
<Routes> |
||||
<Route element={<Layout />}> {/* общий каркас */} |
||||
<Route path="/" element={<HomePage />} /> |
||||
<Route path="/questions" element={<QuestionsPage />} /> |
||||
<Route path="/textbook" element={<TextbookPage />} /> |
||||
<Route path="/test" element={<TestPage />} /> |
||||
<Route path="/report" element={<ReportPage />} /> |
||||
<Route path="/settings" element={<SettingsPage />} /> |
||||
</Route> |
||||
</Routes> |
||||
``` |
||||
|
||||
`<Layout />` — это **обёртка**: боковое меню слева, а справа — `<Outlet />`, куда подставляется текущая страница. |
||||
|
||||
--- |
||||
|
||||
## 8. Как фронтенд общается с бэкендом |
||||
|
||||
### API-запросы |
||||
|
||||
Фронтенд отправляет запросы к бэкенду с помощью функции `fetch`: |
||||
|
||||
```typescript |
||||
// Утилита из lib/utils.ts |
||||
async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> { |
||||
const res = await fetch(`/api${path}`, { |
||||
headers: { "Content-Type": "application/json" }, |
||||
...options, |
||||
}); |
||||
return res.json(); |
||||
} |
||||
|
||||
// Использование |
||||
const questions = await apiFetch<Question[]>("/questions?date=2026-03-27"); |
||||
``` |
||||
|
||||
### Прокси в Vite |
||||
|
||||
Фронтенд работает на порту `5173`, бэкенд — на `3001`. Чтобы не было проблем с CORS, Vite проксирует запросы: всё, что начинается с `/api`, перенаправляется на бэкенд. |
||||
|
||||
```typescript |
||||
// vite.config.ts |
||||
server: { |
||||
proxy: { |
||||
"/api": { |
||||
target: "http://localhost:3001", |
||||
changeOrigin: true, |
||||
}, |
||||
}, |
||||
} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 9. Интеграция с ИИ (DeepSeek) |
||||
|
||||
### Что такое DeepSeek? |
||||
|
||||
DeepSeek — это **языковая модель** (LLM), похожая на ChatGPT. Она принимает текст и генерирует ответ. |
||||
|
||||
### Как мы подключаемся? |
||||
|
||||
DeepSeek использует **OpenAI-совместимый API**. Это значит, мы можем использовать библиотеку `openai` от OpenAI, просто поменяв адрес сервера: |
||||
|
||||
```typescript |
||||
import OpenAI from "openai"; |
||||
|
||||
const client = new OpenAI({ |
||||
baseURL: "https://api.deepseek.com", // адрес DeepSeek вместо OpenAI |
||||
apiKey: "ваш-ключ", |
||||
}); |
||||
``` |
||||
|
||||
### Промпты |
||||
|
||||
**Промпт** (prompt) — это инструкция для ИИ. Мы используем разные промпты для разных задач: |
||||
|
||||
- **prompt_answer** — для ответов на вопросы: «Ответь понятно, используй примеры» |
||||
- **prompt_textbook** — для учебника: «Объясняй просто, структурируй текст» |
||||
- **prompt_test** — для тестов: «Сгенерируй 10 вопросов с вариантами ответов» |
||||
- **prompt_report** — для отчёта: «Составь отчёт в таком-то формате» |
||||
|
||||
Все промпты можно редактировать на странице «Настройки». |
||||
|
||||
--- |
||||
|
||||
## 10. Стриминг ответов (SSE) |
||||
|
||||
### Проблема |
||||
|
||||
Когда ИИ генерирует длинный текст, ожидание может занять 10-30 секунд. Без стриминга пользователь видит пустой экран и думает, что приложение зависло. |
||||
|
||||
### Решение: Server-Sent Events (SSE) |
||||
|
||||
SSE — это технология, которая позволяет серверу **отправлять данные частями** по мере их генерации. |
||||
|
||||
Как это работает: |
||||
|
||||
1. Фронтенд отправляет запрос: «Ответь на вопрос» |
||||
2. Бэкенд начинает получать ответ от ИИ **по кусочкам** |
||||
3. Каждый кусочек сразу отправляется на фронтенд |
||||
4. Фронтенд показывает текст по мере поступления — как будто ИИ «печатает» |
||||
|
||||
``` |
||||
Сервер → Фронтенд: |
||||
data: {"content": "React"} |
||||
data: {"content": " — это"} |
||||
data: {"content": " библиотека"} |
||||
data: {"content": " для"} |
||||
data: {"content": " создания"} |
||||
data: {"content": " интерфейсов."} |
||||
data: [DONE] |
||||
``` |
||||
|
||||
На бэкенде: |
||||
```typescript |
||||
res.setHeader("Content-Type", "text/event-stream"); |
||||
|
||||
const stream = await client.chat.completions.create({ |
||||
model: "deepseek-chat", |
||||
messages: [...], |
||||
stream: true, // ← включаем стриминг |
||||
}); |
||||
|
||||
for await (const chunk of stream) { |
||||
const content = chunk.choices[0]?.delta?.content || ""; |
||||
res.write(`data: ${JSON.stringify({ content })}\n\n`); |
||||
} |
||||
``` |
||||
|
||||
На фронтенде: |
||||
```typescript |
||||
const reader = res.body.getReader(); |
||||
const decoder = new TextDecoder(); |
||||
|
||||
while (true) { |
||||
const { done, value } = await reader.read(); |
||||
if (done) break; |
||||
const text = decoder.decode(value); |
||||
// обработать полученные кусочки и обновить UI |
||||
} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Словарь терминов |
||||
|
||||
| Термин | Объяснение | |
||||
|--------|-----------| |
||||
| **API** | Application Programming Interface — способ общения между программами | |
||||
| **HTTP** | Протокол передачи данных в вебе (GET, POST, PUT, DELETE) | |
||||
| **JSON** | Формат данных: `{"name": "Константин", "age": 25}` | |
||||
| **REST** | Стиль проектирования API — каждый ресурс имеет свой URL | |
||||
| **ORM** | Object-Relational Mapping — работа с БД через объекты вместо SQL | |
||||
| **SSE** | Server-Sent Events — односторонняя отправка данных от сервера к клиенту | |
||||
| **LLM** | Large Language Model — большая языковая модель (ИИ) | |
||||
| **Промпт** | Текстовая инструкция для ИИ | |
||||
| **Компонент** | Переиспользуемый блок интерфейса в React | |
||||
| **Состояние** | Данные компонента, при изменении которых он перерисовывается | |
||||
| **Маршрут** | Связь между URL и страницей/обработчиком | |
||||
|
||||
--- |
||||
|
||||
## 11. Дизайн: CSS-анимации и визуальные эффекты |
||||
|
||||
### Почему дизайн важен? |
||||
|
||||
Интерфейс — это первое, что видит пользователь. Если приложение выглядит современно и приятно, им хочется пользоваться. Claude, ChatGPT и другие ИИ-продукты ставят высокую планку дизайна. |
||||
|
||||
### CSS-анимации |
||||
|
||||
Анимации делают интерфейс «живым». В CSS анимация описывается через `@keyframes`: |
||||
|
||||
```css |
||||
@keyframes fade-in { |
||||
from { opacity: 0; transform: translateY(8px); } |
||||
to { opacity: 1; transform: translateY(0); } |
||||
} |
||||
|
||||
.animate-fade-in { |
||||
animation: fade-in 0.4s ease-out both; |
||||
} |
||||
``` |
||||
|
||||
Что происходит: |
||||
1. `from` — начальное состояние (элемент невидим и смещён вниз на 8px) |
||||
2. `to` — конечное состояние (полностью виден, на своём месте) |
||||
3. `0.4s` — длительность анимации |
||||
4. `ease-out` — плавное замедление в конце |
||||
5. `both` — применить конечное состояние после анимации |
||||
|
||||
### Glow-эффект (свечение) |
||||
|
||||
Свечение создаётся через `box-shadow` с цветом акцента: |
||||
|
||||
```css |
||||
.glow-card:hover { |
||||
box-shadow: |
||||
0 0 0 1px rgba(79, 70, 229, 0.08), /* тонкая рамка */ |
||||
0 4px 20px rgba(79, 70, 229, 0.08), /* мягкое свечение */ |
||||
0 1px 3px rgba(0, 0, 0, 0.04); /* лёгкая тень */ |
||||
transform: translateY(-1px); /* лёгкий подъём */ |
||||
} |
||||
``` |
||||
|
||||
### Glassmorphism (стеклянный эффект) |
||||
|
||||
Популярный тренд — полупрозрачный фон с размытием: |
||||
|
||||
```css |
||||
.glass { |
||||
background: rgba(255, 255, 255, 0.85); /* полупрозрачный белый */ |
||||
backdrop-filter: blur(12px); /* размытие фона за элементом */ |
||||
} |
||||
``` |
||||
|
||||
### Пульсирующее свечение |
||||
|
||||
Для привлечения внимания (например, иконка логотипа): |
||||
|
||||
```css |
||||
@keyframes pulse-glow { |
||||
0%, 100% { box-shadow: 0 0 15px rgba(79, 70, 229, 0.15); } |
||||
50% { box-shadow: 0 0 30px rgba(79, 70, 229, 0.25); } |
||||
} |
||||
``` |
||||
|
||||
Свечение плавно усиливается и ослабевает — создаёт ощущение «дыхания». |
||||
|
||||
### Принципы хорошей анимации |
||||
|
||||
1. **Быстро** — не более 0.3-0.5 секунды (длиннее раздражает) |
||||
2. **Плавно** — используйте `ease-out` или `cubic-bezier` |
||||
3. **Ненавязчиво** — анимация не должна мешать работе |
||||
4. **Осмысленно** — анимируйте только то, что привлекает внимание к действию |
||||
|
||||
--- |
||||
|
||||
## 12. Electron: веб-приложение как десктоп-программа |
||||
|
||||
### Что такое Electron? |
||||
|
||||
Electron — это фреймворк, который позволяет запускать веб-приложение **как обычную программу** на Windows, macOS и Linux. Технически, он встраивает браузер Chromium внутрь окна приложения. |
||||
|
||||
Пример приложений на Electron: VS Code, Discord, Slack, Notion. |
||||
|
||||
### Как это работает |
||||
|
||||
``` |
||||
┌──────────────────────────────────┐ |
||||
│ Окно Electron (Chromium) │ |
||||
│ ┌────────────────────────────┐ │ |
||||
│ │ Наш React-фронтенд │ │ |
||||
│ │ (http://localhost:5173) │ │ |
||||
│ └────────────────────────────┘ │ |
||||
│ │ |
||||
│ Node.js (запускает бэкенд) │ |
||||
└──────────────────────────────────┘ |
||||
``` |
||||
|
||||
1. Electron запускает **бэкенд** (Express-сервер) как дочерний процесс |
||||
2. Открывает **окно** и загружает в него фронтенд |
||||
3. Пользователь видит обычное приложение, без адресной строки браузера |
||||
|
||||
### Главный файл Electron (`electron/main.js`) |
||||
|
||||
```javascript |
||||
const { app, BrowserWindow } = require("electron"); |
||||
|
||||
function createWindow() { |
||||
const win = new BrowserWindow({ |
||||
width: 1200, |
||||
height: 800, |
||||
titleBarStyle: "hiddenInset", // macOS-стиль: кнопки светофора встроены |
||||
}); |
||||
|
||||
win.loadURL("http://localhost:5173"); |
||||
} |
||||
|
||||
app.whenReady().then(createWindow); |
||||
``` |
||||
|
||||
### Команды запуска |
||||
|
||||
```bash |
||||
# Как десктоп-программу (Electron + бэкенд + фронтенд): |
||||
npm run dev |
||||
|
||||
# Как обычное веб-приложение в браузере: |
||||
npm run dev:web |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Словарь терминов |
||||
|
||||
| Термин | Объяснение | |
||||
|--------|-----------| |
||||
| **API** | Application Programming Interface — способ общения между программами | |
||||
| **HTTP** | Протокол передачи данных в вебе (GET, POST, PUT, DELETE) | |
||||
| **JSON** | Формат данных: `{"name": "Константин", "age": 25}` | |
||||
| **REST** | Стиль проектирования API — каждый ресурс имеет свой URL | |
||||
| **ORM** | Object-Relational Mapping — работа с БД через объекты вместо SQL | |
||||
| **SSE** | Server-Sent Events — односторонняя отправка данных от сервера к клиенту | |
||||
| **LLM** | Large Language Model — большая языковая модель (ИИ) | |
||||
| **Промпт** | Текстовая инструкция для ИИ | |
||||
| **Компонент** | Переиспользуемый блок интерфейса в React | |
||||
| **Состояние** | Данные компонента, при изменении которых он перерисовывается | |
||||
| **Маршрут** | Связь между URL и страницей/обработчиком | |
||||
| **Electron** | Фреймворк для создания десктоп-приложений из веб-технологий | |
||||
| **Glassmorphism** | Дизайн-тренд: полупрозрачные элементы с размытием фона | |
||||
| **@keyframes** | CSS-конструкция для описания шагов анимации | |
||||
|
||||
--- |
||||
|
||||
## 13. Архив и поиск: работа с накопленными данными |
||||
|
||||
### Зачем нужен архив? |
||||
|
||||
Со временем в приложении накапливаются данные: вопросы, учебники, отчёты. Без архива старые данные «теряются» — их не видно на текущей странице. Архив собирает **всё** в одном месте. |
||||
|
||||
### Группировка по датам |
||||
|
||||
Данные в архиве организованы по дням. Для этого мы берём массив объектов и группируем: |
||||
|
||||
```typescript |
||||
function groupByDate(items) { |
||||
const groups = {}; |
||||
for (const item of items) { |
||||
const date = item.createdAt.split("T")[0]; // "2026-03-27T15:30:00" → "2026-03-27" |
||||
if (!groups[date]) groups[date] = []; |
||||
groups[date].push(item); |
||||
} |
||||
return groups; |
||||
// Результат: { "2026-03-27": [...], "2026-03-26": [...] } |
||||
} |
||||
``` |
||||
|
||||
### Поиск (фильтрация) |
||||
|
||||
Поиск на фронтенде — это **фильтрация** массива по введённому тексту: |
||||
|
||||
```typescript |
||||
const filtered = questions.filter( |
||||
(q) => q.text.toLowerCase().includes(search.toLowerCase()) |
||||
); |
||||
``` |
||||
|
||||
`includes()` проверяет, содержит ли строка подстроку. `toLowerCase()` делает поиск нечувствительным к регистру. |
||||
|
||||
### Табы (вкладки) |
||||
|
||||
Табы — это состояние, определяющее какой контент показывать: |
||||
|
||||
```typescript |
||||
const [tab, setTab] = useState("questions"); // "questions" | "textbooks" | "reports" |
||||
|
||||
// В зависимости от tab показываем разные списки |
||||
{tab === "questions" && <QuestionsList />} |
||||
{tab === "textbooks" && <TextbooksList />} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 14. Умное управление полями ввода |
||||
|
||||
### Задача |
||||
|
||||
По ТЗ нужно заполнить **минимум 5 вопросов в день**. Но если 3 уже сохранены — показывать 5 полей глупо. Нужно показать только 2 оставшихся (плюс кнопку «Ещё»). |
||||
|
||||
### Решение |
||||
|
||||
```typescript |
||||
function updateFieldCount(savedCount: number) { |
||||
const needed = Math.max(1, 5 - savedCount); |
||||
// Если сохранено 0 → 5 полей |
||||
// Если сохранено 3 → 2 поля |
||||
// Если сохранено 5+ → 1 поле (всегда можно добавить ещё) |
||||
setFields(Array(needed).fill("")); |
||||
} |
||||
``` |
||||
|
||||
`Math.max(1, ...)` гарантирует, что **хотя бы одно поле** всегда доступно. |
||||
|
||||
--- |
||||
|
||||
*Учебник обновлён. Новые разделы: архив с поиском, умное управление полями.* |
||||
@ -0,0 +1,5 @@
|
||||
node_modules |
||||
# Keep environment variables out of version control |
||||
.env |
||||
|
||||
/generated/prisma |
||||
@ -0,0 +1,15 @@
|
||||
# Локальная разработка с PostgreSQL (например docker compose up db -d) |
||||
DATABASE_URL="postgresql://edu:edu@localhost:5432/edu_helper" |
||||
|
||||
JWT_SECRET="dev-secret-min-32-characters-long-string!" |
||||
|
||||
# Первый запуск при пустой БД (npm run db:seed) |
||||
SEED_TUTOR_USERNAME=alexey |
||||
SEED_STUDENT_USERNAME=konstantin |
||||
SEED_TUTOR_PASSWORD=your-tutor-password |
||||
SEED_STUDENT_PASSWORD=your-student-password |
||||
|
||||
# Опционально |
||||
# DEEPSEEK_API_KEY= |
||||
# PORT=3001 |
||||
# COOKIE_SECURE=true |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,45 @@
|
||||
{ |
||||
"name": "backend", |
||||
"version": "1.0.0", |
||||
"description": "", |
||||
"main": "dist/index.js", |
||||
"scripts": { |
||||
"dev": "tsx watch src/index.ts", |
||||
"build": "tsc", |
||||
"start": "node dist/index.js", |
||||
"db:migrate": "prisma migrate dev", |
||||
"db:push": "prisma db push", |
||||
"db:studio": "prisma studio", |
||||
"db:seed": "tsx src/seed.ts" |
||||
}, |
||||
"keywords": [], |
||||
"author": "", |
||||
"license": "ISC", |
||||
"type": "commonjs", |
||||
"prisma": { |
||||
"seed": "tsx src/seed.ts" |
||||
}, |
||||
"dependencies": { |
||||
"@prisma/client": "^5.22.0", |
||||
"@types/multer": "^2.1.0", |
||||
"bcryptjs": "^2.4.3", |
||||
"cookie-parser": "^1.4.7", |
||||
"cors": "^2.8.6", |
||||
"dotenv": "^17.3.1", |
||||
"express": "^5.2.1", |
||||
"jsonwebtoken": "^9.0.2", |
||||
"multer": "^2.1.1", |
||||
"openai": "^6.33.0", |
||||
"prisma": "^5.22.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@types/bcryptjs": "^2.4.6", |
||||
"@types/cookie-parser": "^1.4.8", |
||||
"@types/cors": "^2.8.19", |
||||
"@types/express": "^5.0.6", |
||||
"@types/jsonwebtoken": "^9.0.9", |
||||
"@types/node": "^25.5.0", |
||||
"tsx": "^4.21.0", |
||||
"typescript": "^6.0.2" |
||||
} |
||||
} |
||||
@ -0,0 +1,128 @@
|
||||
-- CreateEnum |
||||
CREATE TYPE "Role" AS ENUM ('TUTOR', 'STUDENT'); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "User" ( |
||||
"id" SERIAL NOT NULL, |
||||
"username" TEXT NOT NULL, |
||||
"passwordHash" TEXT NOT NULL, |
||||
"role" "Role" NOT NULL, |
||||
"displayName" TEXT, |
||||
|
||||
CONSTRAINT "User_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "TutorAssignment" ( |
||||
"tutorId" INTEGER NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
|
||||
CONSTRAINT "TutorAssignment_pkey" PRIMARY KEY ("tutorId","studentId") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "Setting" ( |
||||
"key" TEXT NOT NULL, |
||||
"value" TEXT NOT NULL, |
||||
|
||||
CONSTRAINT "Setting_pkey" PRIMARY KEY ("key") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "ChatMessage" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"role" TEXT NOT NULL, |
||||
"content" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "ChatMessage_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "Question" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"text" TEXT NOT NULL, |
||||
"answer" TEXT, |
||||
"date" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "Question_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "Textbook" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"topic" TEXT NOT NULL, |
||||
"content" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "Textbook_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "Test" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"topic" TEXT NOT NULL, |
||||
"questions" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "Test_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "TestResult" ( |
||||
"id" SERIAL NOT NULL, |
||||
"testId" INTEGER NOT NULL, |
||||
"answers" TEXT NOT NULL, |
||||
"score" INTEGER NOT NULL, |
||||
"total" INTEGER NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "TestResult_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateTable |
||||
CREATE TABLE "Report" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"date" TEXT NOT NULL, |
||||
"content" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "Report_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- CreateIndex |
||||
CREATE UNIQUE INDEX "User_username_key" ON "User"("username"); |
||||
|
||||
-- CreateIndex |
||||
CREATE UNIQUE INDEX "TutorAssignment_studentId_key" ON "TutorAssignment"("studentId"); |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "TutorAssignment" ADD CONSTRAINT "TutorAssignment_tutorId_fkey" FOREIGN KEY ("tutorId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "TutorAssignment" ADD CONSTRAINT "TutorAssignment_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "ChatMessage" ADD CONSTRAINT "ChatMessage_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "Question" ADD CONSTRAINT "Question_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "Textbook" ADD CONSTRAINT "Textbook_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "Test" ADD CONSTRAINT "Test_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "TestResult" ADD CONSTRAINT "TestResult_testId_fkey" FOREIGN KEY ("testId") REFERENCES "Test"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "Report" ADD CONSTRAINT "Report_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
|
||||
@ -0,0 +1,14 @@
|
||||
-- CreateTable |
||||
CREATE TABLE "HallPhoto" ( |
||||
"id" SERIAL NOT NULL, |
||||
"studentId" INTEGER NOT NULL, |
||||
"date" TEXT NOT NULL, |
||||
"fileName" TEXT NOT NULL, |
||||
"mimeType" TEXT NOT NULL, |
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, |
||||
|
||||
CONSTRAINT "HallPhoto_pkey" PRIMARY KEY ("id") |
||||
); |
||||
|
||||
-- AddForeignKey |
||||
ALTER TABLE "HallPhoto" ADD CONSTRAINT "HallPhoto_studentId_fkey" FOREIGN KEY ("studentId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE; |
||||
@ -0,0 +1,2 @@
|
||||
-- AlterTable |
||||
ALTER TABLE "HallPhoto" ADD COLUMN "originalName" TEXT NOT NULL DEFAULT ''; |
||||
@ -0,0 +1,3 @@
|
||||
# Please do not edit this file manually |
||||
# It should be added in your version-control system (i.e. Git) |
||||
provider = "postgresql" |
||||
@ -0,0 +1,114 @@
|
||||
generator client { |
||||
provider = "prisma-client-js" |
||||
binaryTargets = ["native", "linux-musl-openssl-3.0.x", "linux-musl-arm64-openssl-3.0.x"] |
||||
} |
||||
|
||||
datasource db { |
||||
provider = "postgresql" |
||||
url = env("DATABASE_URL") |
||||
} |
||||
|
||||
enum Role { |
||||
TUTOR |
||||
STUDENT |
||||
} |
||||
|
||||
model User { |
||||
id Int @id @default(autoincrement()) |
||||
username String @unique |
||||
passwordHash String |
||||
role Role |
||||
displayName String? |
||||
|
||||
tutoringAssignments TutorAssignment[] @relation("TutorInAssignment") |
||||
studentAssignment TutorAssignment? @relation("StudentInAssignment") |
||||
|
||||
questions Question[] |
||||
chatMessages ChatMessage[] |
||||
textbooks Textbook[] |
||||
tests Test[] |
||||
reports Report[] |
||||
hallPhotos HallPhoto[] |
||||
} |
||||
|
||||
model TutorAssignment { |
||||
tutorId Int |
||||
studentId Int @unique |
||||
tutor User @relation("TutorInAssignment", fields: [tutorId], references: [id], onDelete: Cascade) |
||||
student User @relation("StudentInAssignment", fields: [studentId], references: [id], onDelete: Cascade) |
||||
|
||||
@@id([tutorId, studentId]) |
||||
} |
||||
|
||||
model Setting { |
||||
key String @id |
||||
value String |
||||
} |
||||
|
||||
model ChatMessage { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
role String |
||||
content String |
||||
createdAt DateTime @default(now()) |
||||
} |
||||
|
||||
model Question { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
text String |
||||
answer String? |
||||
date String |
||||
createdAt DateTime @default(now()) |
||||
} |
||||
|
||||
model Textbook { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
topic String |
||||
content String |
||||
createdAt DateTime @default(now()) |
||||
} |
||||
|
||||
model Test { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
topic String |
||||
questions String |
||||
createdAt DateTime @default(now()) |
||||
results TestResult[] |
||||
} |
||||
|
||||
model TestResult { |
||||
id Int @id @default(autoincrement()) |
||||
testId Int |
||||
answers String |
||||
score Int |
||||
total Int |
||||
createdAt DateTime @default(now()) |
||||
test Test @relation(fields: [testId], references: [id], onDelete: Cascade) |
||||
} |
||||
|
||||
model Report { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
date String |
||||
content String |
||||
createdAt DateTime @default(now()) |
||||
} |
||||
|
||||
model HallPhoto { |
||||
id Int @id @default(autoincrement()) |
||||
studentId Int |
||||
student User @relation(fields: [studentId], references: [id], onDelete: Cascade) |
||||
date String |
||||
fileName String |
||||
originalName String @default("") |
||||
mimeType String |
||||
createdAt DateTime @default(now()) |
||||
} |
||||
@ -0,0 +1,67 @@
|
||||
/// <reference path="./types/express.d.ts" />
|
||||
import fs from "fs"; |
||||
import path from "path"; |
||||
import express from "express"; |
||||
import cors from "cors"; |
||||
import cookieParser from "cookie-parser"; |
||||
import dotenv from "dotenv"; |
||||
import { errorHandler } from "./middleware/errorHandler"; |
||||
import { requireAuth } from "./middleware/auth"; |
||||
import { attachStudentId } from "./middleware/studentContext"; |
||||
import authRouter from "./routes/auth"; |
||||
import settingsRouter from "./routes/settings"; |
||||
import chatRouter from "./routes/chat"; |
||||
import questionsRouter from "./routes/questions"; |
||||
import textbooksRouter from "./routes/textbooks"; |
||||
import testsRouter from "./routes/tests"; |
||||
import reportsRouter from "./routes/reports"; |
||||
|
||||
dotenv.config(); |
||||
|
||||
const app = express(); |
||||
const PORT = Number(process.env.PORT) || 3001; |
||||
const isProd = process.env.NODE_ENV === "production"; |
||||
|
||||
app.use( |
||||
cors({ |
||||
origin: true, |
||||
credentials: true, |
||||
}) |
||||
); |
||||
app.use(cookieParser()); |
||||
app.use(express.json({ limit: "10mb" })); |
||||
|
||||
app.get("/api/health", (_req, res) => { |
||||
res.json({ status: "ok", timestamp: new Date().toISOString() }); |
||||
}); |
||||
|
||||
app.use("/api/auth", authRouter); |
||||
|
||||
app.use("/api/settings", requireAuth, settingsRouter); |
||||
app.use("/api/chat", requireAuth, attachStudentId, chatRouter); |
||||
app.use("/api/questions", requireAuth, attachStudentId, questionsRouter); |
||||
app.use("/api/textbooks", requireAuth, attachStudentId, textbooksRouter); |
||||
app.use("/api/tests", requireAuth, attachStudentId, testsRouter); |
||||
app.use("/api/reports", requireAuth, attachStudentId, reportsRouter); |
||||
|
||||
const publicDir = path.join(__dirname, "../public"); |
||||
if (isProd && fs.existsSync(publicDir)) { |
||||
app.use(express.static(publicDir)); |
||||
app.use((req, res, next) => { |
||||
if (req.method !== "GET" && req.method !== "HEAD") { |
||||
next(); |
||||
return; |
||||
} |
||||
if (req.path.startsWith("/api")) { |
||||
res.status(404).json({ error: "Not found" }); |
||||
return; |
||||
} |
||||
res.sendFile(path.join(publicDir, "index.html")); |
||||
}); |
||||
} |
||||
|
||||
app.use(errorHandler); |
||||
|
||||
app.listen(PORT, "0.0.0.0", () => { |
||||
console.log(`Server listening on http://0.0.0.0:${PORT}`); |
||||
}); |
||||
@ -0,0 +1,22 @@
|
||||
import jwt from "jsonwebtoken"; |
||||
|
||||
const SECRET = process.env.JWT_SECRET || "dev-only-change-me-use-JWT_SECRET-in-production-32chars"; |
||||
|
||||
export interface JwtPayload { |
||||
sub: number; |
||||
role: "TUTOR" | "STUDENT"; |
||||
username: string; |
||||
} |
||||
|
||||
export function signToken(p: JwtPayload): string { |
||||
return jwt.sign( |
||||
{ sub: p.sub, role: p.role, username: p.username }, |
||||
SECRET, |
||||
{ expiresIn: "7d" } |
||||
); |
||||
} |
||||
|
||||
export function verifyToken(token: string): JwtPayload { |
||||
const decoded = jwt.verify(token, SECRET); |
||||
return decoded as unknown as JwtPayload; |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
import OpenAI from "openai"; |
||||
import prisma from "./prisma"; |
||||
|
||||
let clientInstance: OpenAI | null = null; |
||||
let cachedKey: string | null = null; |
||||
|
||||
export async function getDeepSeekClient(): Promise<OpenAI> { |
||||
const setting = await prisma.setting.findUnique({ where: { key: "deepseek_api_key" } }); |
||||
const apiKey = setting?.value; |
||||
|
||||
if (!apiKey) { |
||||
throw new Error("DeepSeek API key not configured. Go to Settings to add it."); |
||||
} |
||||
|
||||
if (clientInstance && cachedKey === apiKey) { |
||||
return clientInstance; |
||||
} |
||||
|
||||
clientInstance = new OpenAI({ |
||||
baseURL: "https://api.deepseek.com", |
||||
apiKey, |
||||
}); |
||||
cachedKey = apiKey; |
||||
|
||||
return clientInstance; |
||||
} |
||||
|
||||
export async function getPrompt(key: string, fallback: string): Promise<string> { |
||||
const setting = await prisma.setting.findUnique({ where: { key } }); |
||||
return setting?.value || fallback; |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
import { PrismaClient } from "@prisma/client"; |
||||
|
||||
const prisma = new PrismaClient(); |
||||
|
||||
export default prisma; |
||||
@ -0,0 +1,12 @@
|
||||
import prisma from "./prisma"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
export async function getStudentIdForRequest(req: AuthRequest): Promise<number> { |
||||
if (!req.user) throw new Error("No user"); |
||||
if (req.user.role === "STUDENT") return req.user.id; |
||||
const a = await prisma.tutorAssignment.findFirst({ |
||||
where: { tutorId: req.user.id }, |
||||
}); |
||||
if (!a) throw new Error("Tutor has no assigned student"); |
||||
return a.studentId; |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { Request, Response, NextFunction } from "express"; |
||||
import { verifyToken } from "../lib/authTokens"; |
||||
|
||||
export interface AuthUser { |
||||
id: number; |
||||
role: "TUTOR" | "STUDENT"; |
||||
username: string; |
||||
} |
||||
|
||||
export type AuthRequest = Request & { user?: AuthUser }; |
||||
|
||||
export function requireAuth(req: AuthRequest, res: Response, next: NextFunction): void { |
||||
const token = req.cookies?.token; |
||||
if (!token) { |
||||
res.status(401).json({ error: "Unauthorized" }); |
||||
return; |
||||
} |
||||
try { |
||||
const p = verifyToken(token); |
||||
req.user = { id: p.sub, role: p.role, username: p.username }; |
||||
next(); |
||||
} catch { |
||||
res.status(401).json({ error: "Unauthorized" }); |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
import { Request, Response, NextFunction } from "express"; |
||||
|
||||
export function errorHandler(err: Error, _req: Request, res: Response, _next: NextFunction) { |
||||
console.error("[Error]", err.message); |
||||
res.status(500).json({ error: err.message }); |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { Response, NextFunction } from "express"; |
||||
import type { AuthRequest } from "./auth"; |
||||
import { getStudentIdForRequest } from "../lib/studentContext"; |
||||
|
||||
export async function attachStudentId( |
||||
req: AuthRequest, |
||||
res: Response, |
||||
next: NextFunction |
||||
): Promise<void> { |
||||
try { |
||||
req.studentId = await getStudentIdForRequest(req); |
||||
next(); |
||||
} catch { |
||||
res.status(403).json({ error: "Не назначен ученик для наставника" }); |
||||
} |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
import { Router, Request, Response } from "express"; |
||||
import bcrypt from "bcryptjs"; |
||||
import type { CookieOptions } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import { signToken } from "../lib/authTokens"; |
||||
import { requireAuth, type AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
// В Docker/проде часто открывают по HTTP — при secure:true браузер не сохраняет cookie.
|
||||
// Включайте COOKIE_SECURE=true только за HTTPS (reverse proxy + TLS).
|
||||
const cookieSecure = process.env.COOKIE_SECURE === "true"; |
||||
|
||||
const cookieOpts: CookieOptions = { |
||||
httpOnly: true, |
||||
secure: cookieSecure, |
||||
sameSite: "lax", |
||||
maxAge: 7 * 24 * 3600 * 1000, |
||||
path: "/", |
||||
}; |
||||
|
||||
router.post("/login", async (req: Request, res: Response) => { |
||||
const { username, password } = req.body as { username?: string; password?: string }; |
||||
if (!username || !password) { |
||||
res.status(400).json({ error: "Нужны имя пользователя и пароль" }); |
||||
return; |
||||
} |
||||
|
||||
const user = await prisma.user.findUnique({ where: { username: username.trim().toLowerCase() } }); |
||||
if (!user || !(await bcrypt.compare(password, user.passwordHash))) { |
||||
res.status(401).json({ error: "Неверный логин или пароль" }); |
||||
return; |
||||
} |
||||
|
||||
const token = signToken({ |
||||
sub: user.id, |
||||
role: user.role, |
||||
username: user.username, |
||||
}); |
||||
|
||||
res.cookie("token", token, cookieOpts); |
||||
res.json({ |
||||
user: { |
||||
id: user.id, |
||||
username: user.username, |
||||
role: user.role, |
||||
displayName: user.displayName, |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
router.post("/logout", (_req, res: Response) => { |
||||
res.clearCookie("token", { ...cookieOpts, maxAge: undefined }); |
||||
res.json({ success: true }); |
||||
}); |
||||
|
||||
router.get("/me", requireAuth, async (req: AuthRequest, res: Response) => { |
||||
const user = await prisma.user.findUnique({ |
||||
where: { id: req.user!.id }, |
||||
select: { id: true, username: true, role: true, displayName: true }, |
||||
}); |
||||
if (!user) { |
||||
res.status(401).json({ error: "Unauthorized" }); |
||||
return; |
||||
} |
||||
res.json({ user }); |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,83 @@
|
||||
import { Router, Response } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import { getDeepSeekClient } from "../lib/deepseek"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
router.get("/history", async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
const messages = await prisma.chatMessage.findMany({ |
||||
where: { studentId }, |
||||
orderBy: { createdAt: "asc" }, |
||||
take: 100, |
||||
}); |
||||
res.json(messages); |
||||
}); |
||||
|
||||
router.post("/", async (req: AuthRequest, res: Response) => { |
||||
const { message } = req.body; |
||||
const studentId = req.studentId!; |
||||
|
||||
if (!message || typeof message !== "string") { |
||||
res.status(400).json({ error: "Message is required" }); |
||||
return; |
||||
} |
||||
|
||||
await prisma.chatMessage.create({ |
||||
data: { role: "user", content: message, studentId }, |
||||
}); |
||||
|
||||
const history = await prisma.chatMessage.findMany({ |
||||
where: { studentId }, |
||||
orderBy: { createdAt: "asc" }, |
||||
take: 50, |
||||
}); |
||||
|
||||
const client = await getDeepSeekClient(); |
||||
|
||||
const messages = history.map((m: { role: string; content: string }) => ({ |
||||
role: m.role as "user" | "assistant", |
||||
content: m.content, |
||||
})); |
||||
|
||||
res.setHeader("Content-Type", "text/event-stream"); |
||||
res.setHeader("Cache-Control", "no-cache"); |
||||
res.setHeader("Connection", "keep-alive"); |
||||
|
||||
try { |
||||
const stream = await client.chat.completions.create({ |
||||
model: "deepseek-chat", |
||||
messages, |
||||
stream: true, |
||||
}); |
||||
|
||||
let fullResponse = ""; |
||||
|
||||
for await (const chunk of stream) { |
||||
const content = chunk.choices[0]?.delta?.content || ""; |
||||
if (content) { |
||||
fullResponse += content; |
||||
res.write(`data: ${JSON.stringify({ content })}\n\n`); |
||||
} |
||||
} |
||||
|
||||
await prisma.chatMessage.create({ |
||||
data: { role: "assistant", content: fullResponse, studentId }, |
||||
}); |
||||
|
||||
res.write(`data: [DONE]\n\n`); |
||||
res.end(); |
||||
} catch (err: any) { |
||||
res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`); |
||||
res.end(); |
||||
} |
||||
}); |
||||
|
||||
router.delete("/history", async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
await prisma.chatMessage.deleteMany({ where: { studentId } }); |
||||
res.json({ success: true }); |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,132 @@
|
||||
import { Router, Response } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import { getDeepSeekClient, getPrompt } from "../lib/deepseek"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
const DEFAULT_ANSWER_PROMPT = `Ты — терпеливый и дружелюбный репетитор. Твоя задача — ответить на вопрос ученика.
|
||||
|
||||
Правила: |
||||
- Объясняй максимально простым языком, как будто объясняешь человеку, который вообще не разбирается в теме |
||||
- Используй аналогии из повседневной жизни |
||||
- Приводи конкретные примеры |
||||
- Если вопрос сложный — разбей ответ на шаги |
||||
- Форматируй ответ с использованием Markdown (заголовки, списки, выделение) |
||||
- Не используй сложные термины без объяснения`;
|
||||
|
||||
router.get("/", async (req: AuthRequest, res: Response) => { |
||||
const date = req.query.date as string | undefined; |
||||
const search = req.query.search as string | undefined; |
||||
const studentId = req.studentId!; |
||||
const where: { studentId: number; date?: string; text?: { contains: string } } = { studentId }; |
||||
if (date) where.date = date; |
||||
if (search) where.text = { contains: search }; |
||||
const questions = await prisma.question.findMany({ |
||||
where, |
||||
orderBy: { createdAt: "desc" }, |
||||
}); |
||||
res.json(questions); |
||||
}); |
||||
|
||||
router.get("/dates", async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
const questions = await prisma.question.findMany({ |
||||
where: { studentId }, |
||||
select: { date: true }, |
||||
distinct: ["date"], |
||||
orderBy: { createdAt: "desc" }, |
||||
}); |
||||
res.json(questions.map((q: { date: string }) => q.date)); |
||||
}); |
||||
|
||||
router.post("/", async (req: AuthRequest, res: Response) => { |
||||
const { questions } = req.body as { questions: string[] }; |
||||
const studentId = req.studentId!; |
||||
|
||||
if (!Array.isArray(questions) || questions.length === 0) { |
||||
res.status(400).json({ error: "At least 1 question is required" }); |
||||
return; |
||||
} |
||||
|
||||
const date = new Date().toISOString().split("T")[0]; |
||||
|
||||
const created = await Promise.all( |
||||
questions.map((text) => |
||||
prisma.question.create({ data: { text, date, studentId } }) |
||||
) |
||||
); |
||||
|
||||
res.json(created); |
||||
}); |
||||
|
||||
router.delete("/:id", async (req: AuthRequest, res: Response) => { |
||||
if (req.user!.role !== "STUDENT") { |
||||
res.status(403).json({ error: "Удалять вопросы может только ученик — только свои" }); |
||||
return; |
||||
} |
||||
|
||||
const id = parseInt(req.params.id as string, 10); |
||||
const studentId = req.user!.id; |
||||
|
||||
const existing = await prisma.question.findFirst({ |
||||
where: { id, studentId }, |
||||
}); |
||||
|
||||
if (!existing) { |
||||
res.status(404).json({ error: "Вопрос не найден" }); |
||||
return; |
||||
} |
||||
|
||||
await prisma.question.delete({ where: { id } }); |
||||
res.json({ success: true }); |
||||
}); |
||||
|
||||
router.post("/:id/answer", async (req: AuthRequest, res: Response) => { |
||||
const id = parseInt(req.params.id as string, 10); |
||||
const studentId = req.studentId!; |
||||
const question = await prisma.question.findFirst({ where: { id, studentId } }); |
||||
|
||||
if (!question) { |
||||
res.status(404).json({ error: "Question not found" }); |
||||
return; |
||||
} |
||||
|
||||
const client = await getDeepSeekClient(); |
||||
const systemPrompt = await getPrompt("prompt_answer", DEFAULT_ANSWER_PROMPT); |
||||
|
||||
res.setHeader("Content-Type", "text/event-stream"); |
||||
res.setHeader("Cache-Control", "no-cache"); |
||||
res.setHeader("Connection", "keep-alive"); |
||||
|
||||
try { |
||||
const stream = await client.chat.completions.create({ |
||||
model: "deepseek-chat", |
||||
messages: [ |
||||
{ role: "system", content: systemPrompt }, |
||||
{ role: "user", content: question.text }, |
||||
], |
||||
stream: true, |
||||
}); |
||||
|
||||
let fullAnswer = ""; |
||||
|
||||
for await (const chunk of stream) { |
||||
const content = chunk.choices[0]?.delta?.content || ""; |
||||
if (content) { |
||||
fullAnswer += content; |
||||
res.write(`data: ${JSON.stringify({ content })}\n\n`); |
||||
} |
||||
} |
||||
|
||||
await prisma.question.update({ where: { id }, data: { answer: fullAnswer } }); |
||||
|
||||
res.write(`data: [DONE]\n\n`); |
||||
res.end(); |
||||
} catch (err: any) { |
||||
res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`); |
||||
res.end(); |
||||
} |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,192 @@
|
||||
import fs from "fs"; |
||||
import path from "path"; |
||||
import { Router, Response } from "express"; |
||||
import multer from "multer"; |
||||
import prisma from "../lib/prisma"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
const uploadsDir = process.env.UPLOADS_DIR || path.join(process.cwd(), "uploads"); |
||||
fs.mkdirSync(uploadsDir, { recursive: true }); |
||||
|
||||
const storage = multer.diskStorage({ |
||||
destination: (_req, _file, cb) => cb(null, uploadsDir), |
||||
filename: (_req, file, cb) => { |
||||
const ext = path.extname(file.originalname || "").toLowerCase(); |
||||
cb(null, `${Date.now()}-${Math.round(Math.random() * 1e9)}${ext}`); |
||||
}, |
||||
}); |
||||
|
||||
const upload = multer({ |
||||
storage, |
||||
limits: { fileSize: 10 * 1024 * 1024 }, |
||||
fileFilter: (_req, file, cb) => { |
||||
if (file.mimetype.startsWith("image/")) cb(null, true); |
||||
else cb(new Error("Можно загружать только изображения")); |
||||
}, |
||||
}); |
||||
|
||||
/** UTF-8 имя, ошибочно прочитанное как Latin-1 (типично для multipart). */ |
||||
function normalizeUtf8Filename(s: string): string { |
||||
if (!s) return s; |
||||
if (/[\u0400-\u04FF]/.test(s)) return s; |
||||
try { |
||||
const recovered = Buffer.from(s, "latin1").toString("utf8"); |
||||
if (/[\u0400-\u04FF]/.test(recovered)) return recovered; |
||||
} catch { |
||||
/* ignore */ |
||||
} |
||||
return s; |
||||
} |
||||
|
||||
function safeOriginalName(name: string | undefined): string { |
||||
if (!name) return ""; |
||||
const base = path.basename(name.replace(/\0/g, "")); |
||||
const normalized = normalizeUtf8Filename(base); |
||||
return normalized.length > 255 ? normalized.slice(0, 255) : normalized; |
||||
} |
||||
|
||||
/** Загрузка и удаление фото в «Зале» — только ученик konstantin. */ |
||||
function canManageHallPhotos(req: AuthRequest): boolean { |
||||
return req.user!.username.toLowerCase() === "konstantin"; |
||||
} |
||||
|
||||
router.get("/", async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
const date = req.query.date ? String(req.query.date) : undefined; |
||||
const items = await prisma.hallPhoto.findMany({ |
||||
where: date ? { studentId, date } : { studentId }, |
||||
orderBy: { createdAt: "desc" }, |
||||
}); |
||||
|
||||
res.json( |
||||
items.map((p) => { |
||||
const raw = p.originalName.trim() || p.fileName; |
||||
const displayName = normalizeUtf8Filename(raw); |
||||
return { |
||||
id: p.id, |
||||
date: p.date, |
||||
createdAt: p.createdAt, |
||||
imageUrl: `/api/reports/${p.id}/image`, |
||||
fileName: p.fileName, |
||||
originalName: p.originalName, |
||||
displayName, |
||||
}; |
||||
}) |
||||
); |
||||
}); |
||||
|
||||
router.post( |
||||
"/upload", |
||||
(req: AuthRequest, res, next) => { |
||||
if (!canManageHallPhotos(req)) { |
||||
res.status(403).json({ error: "Загрузка фото доступна только ученику" }); |
||||
return; |
||||
} |
||||
next(); |
||||
}, |
||||
(req, res, next) => { |
||||
upload.single("photo")(req, res, (err) => { |
||||
if (err) { |
||||
res.status(400).json({ error: err.message || "Ошибка загрузки файла" }); |
||||
return; |
||||
} |
||||
next(); |
||||
}); |
||||
}, |
||||
async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
if (!req.file) { |
||||
res.status(400).json({ error: "Файл не передан" }); |
||||
return; |
||||
} |
||||
|
||||
const date = |
||||
typeof req.body.date === "string" && req.body.date |
||||
? req.body.date |
||||
: new Date().toISOString().split("T")[0]; |
||||
|
||||
const originalName = safeOriginalName(req.file.originalname); |
||||
|
||||
const created = await prisma.hallPhoto.create({ |
||||
data: { |
||||
studentId, |
||||
date, |
||||
fileName: req.file.filename, |
||||
originalName, |
||||
mimeType: req.file.mimetype || "application/octet-stream", |
||||
}, |
||||
}); |
||||
|
||||
const displayName = normalizeUtf8Filename( |
||||
created.originalName.trim() || created.fileName |
||||
); |
||||
|
||||
res.json({ |
||||
id: created.id, |
||||
date: created.date, |
||||
createdAt: created.createdAt, |
||||
imageUrl: `/api/reports/${created.id}/image`, |
||||
fileName: created.fileName, |
||||
originalName: created.originalName, |
||||
displayName, |
||||
}); |
||||
} |
||||
); |
||||
|
||||
router.delete("/:id", async (req: AuthRequest, res: Response) => { |
||||
if (!canManageHallPhotos(req)) { |
||||
res.status(403).json({ error: "Удаление фото доступно только ученику" }); |
||||
return; |
||||
} |
||||
const studentId = req.studentId!; |
||||
const id = Number(req.params.id); |
||||
if (!Number.isFinite(id)) { |
||||
res.status(400).json({ error: "Некорректный id" }); |
||||
return; |
||||
} |
||||
|
||||
const photo = await prisma.hallPhoto.findFirst({ where: { id, studentId } }); |
||||
if (!photo) { |
||||
res.status(404).json({ error: "Фото не найдено" }); |
||||
return; |
||||
} |
||||
|
||||
const fullPath = path.join(uploadsDir, path.basename(photo.fileName)); |
||||
await prisma.hallPhoto.delete({ where: { id } }); |
||||
if (fs.existsSync(fullPath)) { |
||||
try { |
||||
fs.unlinkSync(fullPath); |
||||
} catch { |
||||
/* ignore */ |
||||
} |
||||
} |
||||
|
||||
res.json({ success: true }); |
||||
}); |
||||
|
||||
router.get("/:id/image", async (req: AuthRequest, res: Response) => { |
||||
const studentId = req.studentId!; |
||||
const id = Number(req.params.id); |
||||
if (!Number.isFinite(id)) { |
||||
res.status(400).json({ error: "Некорректный id" }); |
||||
return; |
||||
} |
||||
|
||||
const photo = await prisma.hallPhoto.findFirst({ where: { id, studentId } }); |
||||
if (!photo) { |
||||
res.status(404).json({ error: "Фото не найдено" }); |
||||
return; |
||||
} |
||||
|
||||
const fullPath = path.join(uploadsDir, path.basename(photo.fileName)); |
||||
if (!fs.existsSync(fullPath)) { |
||||
res.status(404).json({ error: "Файл не найден на диске" }); |
||||
return; |
||||
} |
||||
|
||||
res.setHeader("Content-Type", photo.mimeType); |
||||
res.sendFile(fullPath); |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,48 @@
|
||||
import { Router, Response } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
router.get("/", async (_req: AuthRequest, res: Response) => { |
||||
const settings = await prisma.setting.findMany(); |
||||
const result: Record<string, string> = {}; |
||||
for (const s of settings) { |
||||
result[s.key] = s.key === "deepseek_api_key" ? "••••••" + s.value.slice(-4) : s.value; |
||||
} |
||||
res.json(result); |
||||
}); |
||||
|
||||
router.get("/raw", async (req: AuthRequest, res: Response) => { |
||||
if (req.user!.role !== "TUTOR") { |
||||
res.status(403).json({ error: "Только наставник может просматривать полные настройки" }); |
||||
return; |
||||
} |
||||
const settings = await prisma.setting.findMany(); |
||||
const result: Record<string, string> = {}; |
||||
for (const s of settings) { |
||||
result[s.key] = s.value; |
||||
} |
||||
res.json(result); |
||||
}); |
||||
|
||||
router.put("/", async (req: AuthRequest, res: Response) => { |
||||
if (req.user!.role !== "TUTOR") { |
||||
res.status(403).json({ error: "Только наставник может менять настройки" }); |
||||
return; |
||||
} |
||||
|
||||
const entries: Record<string, string> = req.body; |
||||
|
||||
for (const [key, value] of Object.entries(entries)) { |
||||
await prisma.setting.upsert({ |
||||
where: { key }, |
||||
update: { value }, |
||||
create: { key, value }, |
||||
}); |
||||
} |
||||
|
||||
res.json({ success: true }); |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,143 @@
|
||||
import { Router, Response } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import { getDeepSeekClient, getPrompt } from "../lib/deepseek"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
const DEFAULT_TEST_PROMPT = `Ты — составитель тестов. Сгенерируй тест из РОВНО 10 вопросов.
|
||||
|
||||
Требования к вопросам: |
||||
- Вопросы должны проверять ПОНИМАНИЕ темы, а не запоминание фактов |
||||
- Сложность: 3 лёгких, 4 средних, 3 сложных |
||||
- Каждый вопрос имеет 4 варианта ответа (a, b, c, d) и ровно один правильный |
||||
- Неправильные варианты должны быть правдоподобными (не абсурдными) |
||||
- Вопросы на русском языке |
||||
|
||||
ВАЖНО: Верни ТОЛЬКО JSON-массив, без markdown-обёрток (\`\`\`json), без пояснений, ЧИСТЫЙ JSON:
|
||||
[{"question":"текст вопроса","options":{"a":"вариант А","b":"вариант Б","c":"вариант В","d":"вариант Г"},"correct":"a"}]`;
|
||||
|
||||
/** Тесты привязаны к текущему пользователю (ученик — свои; наставник — свои черновые, не к ученику). */ |
||||
function testOwnerId(req: AuthRequest): number { |
||||
return req.user!.id; |
||||
} |
||||
|
||||
router.get("/", async (req: AuthRequest, res: Response) => { |
||||
const ownerId = testOwnerId(req); |
||||
const tests = await prisma.test.findMany({ |
||||
where: { studentId: ownerId }, |
||||
orderBy: { createdAt: "desc" }, |
||||
include: { results: true }, |
||||
}); |
||||
res.json(tests); |
||||
}); |
||||
|
||||
router.get("/:id", async (req: AuthRequest, res: Response) => { |
||||
const id = parseInt(req.params.id as string, 10); |
||||
const ownerId = testOwnerId(req); |
||||
const test = await prisma.test.findFirst({ |
||||
where: { id, studentId: ownerId }, |
||||
include: { results: true }, |
||||
}); |
||||
|
||||
if (!test) { |
||||
res.status(404).json({ error: "Test not found" }); |
||||
return; |
||||
} |
||||
|
||||
res.json(test); |
||||
}); |
||||
|
||||
router.post("/generate", async (req: AuthRequest, res: Response) => { |
||||
const { topic, fromQuestions } = req.body; |
||||
const ownerId = testOwnerId(req); |
||||
/** Вопросы «по моим вопросам» берутся из базы назначенного ученика (для наставника — его ученик). */ |
||||
const questionBankStudentId = req.studentId!; |
||||
|
||||
const client = await getDeepSeekClient(); |
||||
const systemPrompt = await getPrompt("prompt_test", DEFAULT_TEST_PROMPT); |
||||
|
||||
let userMessage: string; |
||||
|
||||
if (fromQuestions) { |
||||
const questions = await prisma.question.findMany({ |
||||
where: { studentId: questionBankStudentId }, |
||||
orderBy: { createdAt: "desc" }, |
||||
take: 20, |
||||
}); |
||||
const questionTexts = questions.map((q: { text: string }) => q.text).join("\n"); |
||||
userMessage = `Составь тест на основе этих вопросов, которые задавал пользователь ранее:\n${questionTexts}`; |
||||
} else { |
||||
if (!topic) { |
||||
res.status(400).json({ error: "Topic is required" }); |
||||
return; |
||||
} |
||||
userMessage = `Тема: ${topic}`; |
||||
} |
||||
|
||||
try { |
||||
const response = await client.chat.completions.create({ |
||||
model: "deepseek-chat", |
||||
messages: [ |
||||
{ role: "system", content: systemPrompt }, |
||||
{ role: "user", content: userMessage }, |
||||
], |
||||
}); |
||||
|
||||
const raw = response.choices[0]?.message?.content || "[]"; |
||||
const jsonMatch = raw.match(/\[[\s\S]*\]/); |
||||
const questionsJson = jsonMatch ? jsonMatch[0] : "[]"; |
||||
|
||||
const test = await prisma.test.create({ |
||||
data: { |
||||
topic: topic || "По прошлым вопросам", |
||||
questions: questionsJson, |
||||
studentId: ownerId, |
||||
}, |
||||
}); |
||||
|
||||
res.json(test); |
||||
} catch (err: any) { |
||||
res.status(500).json({ error: err.message }); |
||||
} |
||||
}); |
||||
|
||||
router.post("/:id/submit", async (req: AuthRequest, res: Response) => { |
||||
const id = parseInt(req.params.id as string, 10); |
||||
const ownerId = testOwnerId(req); |
||||
const { answers } = req.body as { answers: Record<string, string> }; |
||||
|
||||
const test = await prisma.test.findFirst({ where: { id, studentId: ownerId } }); |
||||
if (!test) { |
||||
res.status(404).json({ error: "Test not found" }); |
||||
return; |
||||
} |
||||
|
||||
const questions = JSON.parse(test.questions); |
||||
let score = 0; |
||||
const total = questions.length; |
||||
|
||||
for (const q of questions as { question: string; correct: string }[]) { |
||||
if (answers[q.question] === q.correct) { |
||||
score++; |
||||
} |
||||
} |
||||
|
||||
if (req.user!.role === "TUTOR") { |
||||
res.json({ score, total, persisted: false as const }); |
||||
return; |
||||
} |
||||
|
||||
const result = await prisma.testResult.create({ |
||||
data: { |
||||
testId: id, |
||||
answers: JSON.stringify(answers), |
||||
score, |
||||
total, |
||||
}, |
||||
}); |
||||
|
||||
res.json({ ...result, persisted: true as const }); |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,99 @@
|
||||
import { Router, Response } from "express"; |
||||
import prisma from "../lib/prisma"; |
||||
import { getDeepSeekClient, getPrompt } from "../lib/deepseek"; |
||||
import type { AuthRequest } from "../middleware/auth"; |
||||
|
||||
const router = Router(); |
||||
|
||||
const DEFAULT_TEXTBOOK_PROMPT = `Ты — автор учебника для абсолютных новичков. Твоя аудитория — люди, которые ВООБЩЕ ничего не знают по теме (и не стесняются этого).
|
||||
|
||||
Структура учебника: |
||||
1. **Введение** — зачем это нужно, где применяется в реальной жизни |
||||
2. **Основные понятия** — каждое на отдельном подзаголовке, с определением простыми словами |
||||
3. **Подробное объяснение** — для каждого понятия: аналогия из жизни + конкретный пример |
||||
4. **Как это работает на практике** — пошаговый разбор |
||||
5. **Частые ошибки и заблуждения** — что обычно путают новички |
||||
6. **Итог** — краткое резюме в 5-7 пунктах |
||||
|
||||
Правила: |
||||
- Пиши так, будто объясняешь другу за чашкой кофе |
||||
- Никаких сложных терминов без немедленного объяснения |
||||
- Используй аналогии из повседневной жизни (кухня, транспорт, магазин и т.д.) |
||||
- Формат — Markdown с заголовками, списками, выделением важного |
||||
- Учебник должен быть ДЛИННЫМ и ПОДРОБНЫМ — не менее 2000 слов`;
|
||||
|
||||
router.get("/", async (req: AuthRequest, res: Response) => { |
||||
const search = req.query.search as string | undefined; |
||||
const studentId = req.studentId!; |
||||
const where: { studentId: number; topic?: { contains: string } } = { studentId }; |
||||
if (search) where.topic = { contains: search }; |
||||
const textbooks = await prisma.textbook.findMany({ |
||||
where, |
||||
orderBy: { createdAt: "desc" }, |
||||
}); |
||||
res.json(textbooks); |
||||
}); |
||||
|
||||
router.get("/:id", async (req: AuthRequest, res: Response) => { |
||||
const id = parseInt(req.params.id as string, 10); |
||||
const studentId = req.studentId!; |
||||
const textbook = await prisma.textbook.findFirst({ where: { id, studentId } }); |
||||
|
||||
if (!textbook) { |
||||
res.status(404).json({ error: "Textbook not found" }); |
||||
return; |
||||
} |
||||
|
||||
res.json(textbook); |
||||
}); |
||||
|
||||
router.post("/generate", async (req: AuthRequest, res: Response) => { |
||||
const { topic } = req.body; |
||||
const studentId = req.studentId!; |
||||
|
||||
if (!topic || typeof topic !== "string") { |
||||
res.status(400).json({ error: "Topic is required" }); |
||||
return; |
||||
} |
||||
|
||||
const client = await getDeepSeekClient(); |
||||
const systemPrompt = await getPrompt("prompt_textbook", DEFAULT_TEXTBOOK_PROMPT); |
||||
|
||||
res.setHeader("Content-Type", "text/event-stream"); |
||||
res.setHeader("Cache-Control", "no-cache"); |
||||
res.setHeader("Connection", "keep-alive"); |
||||
|
||||
try { |
||||
const stream = await client.chat.completions.create({ |
||||
model: "deepseek-chat", |
||||
messages: [ |
||||
{ role: "system", content: systemPrompt }, |
||||
{ role: "user", content: `Тема: ${topic}` }, |
||||
], |
||||
stream: true, |
||||
}); |
||||
|
||||
let fullContent = ""; |
||||
|
||||
for await (const chunk of stream) { |
||||
const content = chunk.choices[0]?.delta?.content || ""; |
||||
if (content) { |
||||
fullContent += content; |
||||
res.write(`data: ${JSON.stringify({ content })}\n\n`); |
||||
} |
||||
} |
||||
|
||||
const textbook = await prisma.textbook.create({ |
||||
data: { topic, content: fullContent, studentId }, |
||||
}); |
||||
|
||||
res.write(`data: ${JSON.stringify({ id: textbook.id })}\n\n`); |
||||
res.write(`data: [DONE]\n\n`); |
||||
res.end(); |
||||
} catch (err: any) { |
||||
res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`); |
||||
res.end(); |
||||
} |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,65 @@
|
||||
import "dotenv/config"; |
||||
import bcrypt from "bcryptjs"; |
||||
import prisma from "./lib/prisma"; |
||||
|
||||
async function main() { |
||||
const n = await prisma.user.count(); |
||||
if (n > 0) { |
||||
console.log("Users already exist, skipping seed."); |
||||
return; |
||||
} |
||||
|
||||
const tutorUser = process.env.SEED_TUTOR_USERNAME?.trim().toLowerCase() || "alexey"; |
||||
const studentUser = process.env.SEED_STUDENT_USERNAME?.trim().toLowerCase() || "konstantin"; |
||||
const tutorPass = process.env.SEED_TUTOR_PASSWORD; |
||||
const studentPass = process.env.SEED_STUDENT_PASSWORD; |
||||
|
||||
if (!tutorPass || !studentPass) { |
||||
throw new Error( |
||||
"Первый запуск: задайте SEED_TUTOR_PASSWORD и SEED_STUDENT_PASSWORD в окружении." |
||||
); |
||||
} |
||||
|
||||
const tutor = await prisma.user.create({ |
||||
data: { |
||||
username: tutorUser, |
||||
passwordHash: await bcrypt.hash(tutorPass, 10), |
||||
role: "TUTOR", |
||||
displayName: "Алексей", |
||||
}, |
||||
}); |
||||
|
||||
const student = await prisma.user.create({ |
||||
data: { |
||||
username: studentUser, |
||||
passwordHash: await bcrypt.hash(studentPass, 10), |
||||
role: "STUDENT", |
||||
displayName: "Константин", |
||||
}, |
||||
}); |
||||
|
||||
await prisma.tutorAssignment.create({ |
||||
data: { tutorId: tutor.id, studentId: student.id }, |
||||
}); |
||||
|
||||
const apiKey = process.env.DEEPSEEK_API_KEY?.trim(); |
||||
if (apiKey) { |
||||
await prisma.setting.upsert({ |
||||
where: { key: "deepseek_api_key" }, |
||||
update: { value: apiKey }, |
||||
create: { key: "deepseek_api_key", value: apiKey }, |
||||
}); |
||||
console.log("Seeded deepseek_api_key from DEEPSEEK_API_KEY"); |
||||
} |
||||
|
||||
console.log(`Seeded tutor=${tutorUser}, student=${studentUser}`); |
||||
} |
||||
|
||||
main() |
||||
.catch((e) => { |
||||
console.error(e); |
||||
process.exit(1); |
||||
}) |
||||
.finally(async () => { |
||||
await prisma.$disconnect(); |
||||
}); |
||||
@ -0,0 +1,10 @@
|
||||
declare global { |
||||
namespace Express { |
||||
interface Request { |
||||
user?: { id: number; role: "TUTOR" | "STUDENT"; username: string }; |
||||
studentId?: number; |
||||
} |
||||
} |
||||
} |
||||
|
||||
export {}; |
||||
@ -0,0 +1,19 @@
|
||||
{ |
||||
"compilerOptions": { |
||||
"target": "ES2022", |
||||
"module": "commonjs", |
||||
"lib": ["ES2022"], |
||||
"outDir": "./dist", |
||||
"rootDir": "./src", |
||||
"strict": true, |
||||
"esModuleInterop": true, |
||||
"skipLibCheck": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
"resolveJsonModule": true, |
||||
"declaration": true, |
||||
"declarationMap": true, |
||||
"sourceMap": true |
||||
}, |
||||
"include": ["src/**/*"], |
||||
"exclude": ["node_modules", "dist"] |
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
services: |
||||
db: |
||||
image: postgres:16-alpine |
||||
environment: |
||||
POSTGRES_USER: ${POSTGRES_USER:-edu} |
||||
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-edu} |
||||
POSTGRES_DB: ${POSTGRES_DB:-edu_helper} |
||||
volumes: |
||||
- pgdata:/var/lib/postgresql/data |
||||
healthcheck: |
||||
test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-edu} -d ${POSTGRES_DB:-edu_helper}"] |
||||
interval: 3s |
||||
timeout: 5s |
||||
retries: 10 |
||||
|
||||
app: |
||||
build: . |
||||
ports: |
||||
- "${APP_PORT:-3000}:3000" |
||||
environment: |
||||
NODE_ENV: production |
||||
PORT: "3000" |
||||
DATABASE_URL: postgresql://${POSTGRES_USER:-edu}:${POSTGRES_PASSWORD:-edu}@db:5432/${POSTGRES_DB:-edu_helper} |
||||
JWT_SECRET: ${JWT_SECRET:?Set JWT_SECRET in .env} |
||||
SEED_TUTOR_USERNAME: ${SEED_TUTOR_USERNAME:-alexey} |
||||
SEED_STUDENT_USERNAME: ${SEED_STUDENT_USERNAME:-konstantin} |
||||
SEED_TUTOR_PASSWORD: ${SEED_TUTOR_PASSWORD:?Set SEED_TUTOR_PASSWORD in .env} |
||||
SEED_STUDENT_PASSWORD: ${SEED_STUDENT_PASSWORD:?Set SEED_STUDENT_PASSWORD in .env} |
||||
DEEPSEEK_API_KEY: ${DEEPSEEK_API_KEY:-} |
||||
COOKIE_SECURE: ${COOKIE_SECURE:-false} |
||||
depends_on: |
||||
db: |
||||
condition: service_healthy |
||||
volumes: |
||||
- uploads:/app/uploads |
||||
|
||||
volumes: |
||||
pgdata: |
||||
uploads: |
||||
@ -0,0 +1,6 @@
|
||||
#!/bin/sh |
||||
set -e |
||||
cd /app |
||||
npx prisma migrate deploy |
||||
node dist/seed.js |
||||
exec "$@" |
||||
@ -0,0 +1,24 @@
|
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite |
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
||||
|
||||
Currently, two official plugins are available: |
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) |
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) |
||||
|
||||
## React Compiler |
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
||||
|
||||
## Expanding the ESLint configuration |
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
||||
|
||||
```js |
||||
export default defineConfig([ |
||||
globalIgnores(['dist']), |
||||
{ |
||||
files: ['**/*.{ts,tsx}'], |
||||
extends: [ |
||||
// Other configs... |
||||
|
||||
// Remove tseslint.configs.recommended and replace with this |
||||
tseslint.configs.recommendedTypeChecked, |
||||
// Alternatively, use this for stricter rules |
||||
tseslint.configs.strictTypeChecked, |
||||
// Optionally, add this for stylistic rules |
||||
tseslint.configs.stylisticTypeChecked, |
||||
|
||||
// Other configs... |
||||
], |
||||
languageOptions: { |
||||
parserOptions: { |
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'], |
||||
tsconfigRootDir: import.meta.dirname, |
||||
}, |
||||
// other options... |
||||
}, |
||||
}, |
||||
]) |
||||
``` |
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
||||
|
||||
```js |
||||
// eslint.config.js |
||||
import reactX from 'eslint-plugin-react-x' |
||||
import reactDom from 'eslint-plugin-react-dom' |
||||
|
||||
export default defineConfig([ |
||||
globalIgnores(['dist']), |
||||
{ |
||||
files: ['**/*.{ts,tsx}'], |
||||
extends: [ |
||||
// Other configs... |
||||
// Enable lint rules for React |
||||
reactX.configs['recommended-typescript'], |
||||
// Enable lint rules for React DOM |
||||
reactDom.configs.recommended, |
||||
], |
||||
languageOptions: { |
||||
parserOptions: { |
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'], |
||||
tsconfigRootDir: import.meta.dirname, |
||||
}, |
||||
// other options... |
||||
}, |
||||
}, |
||||
]) |
||||
``` |
||||
@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js' |
||||
import globals from 'globals' |
||||
import reactHooks from 'eslint-plugin-react-hooks' |
||||
import reactRefresh from 'eslint-plugin-react-refresh' |
||||
import tseslint from 'typescript-eslint' |
||||
import { defineConfig, globalIgnores } from 'eslint/config' |
||||
|
||||
export default defineConfig([ |
||||
globalIgnores(['dist']), |
||||
{ |
||||
files: ['**/*.{ts,tsx}'], |
||||
extends: [ |
||||
js.configs.recommended, |
||||
tseslint.configs.recommended, |
||||
reactHooks.configs.flat.recommended, |
||||
reactRefresh.configs.vite, |
||||
], |
||||
languageOptions: { |
||||
ecmaVersion: 2020, |
||||
globals: globals.browser, |
||||
}, |
||||
}, |
||||
]) |
||||
@ -0,0 +1,13 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>frontend</title> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script type="module" src="/src/main.tsx"></script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@
|
||||
{ |
||||
"name": "frontend", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "tsc -b && vite build", |
||||
"lint": "eslint .", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"class-variance-authority": "^0.7.1", |
||||
"clsx": "^2.1.1", |
||||
"html2canvas": "^1.4.1", |
||||
"jspdf": "^4.2.1", |
||||
"lucide-react": "^1.7.0", |
||||
"react": "^19.2.4", |
||||
"react-dom": "^19.2.4", |
||||
"react-markdown": "^10.1.0", |
||||
"react-router-dom": "^7.13.2", |
||||
"remark-gfm": "^4.0.1", |
||||
"tailwind-merge": "^3.5.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@eslint/js": "^9.39.4", |
||||
"@tailwindcss/vite": "^4.2.2", |
||||
"@types/node": "^24.12.0", |
||||
"@types/react": "^19.2.14", |
||||
"@types/react-dom": "^19.2.3", |
||||
"@vitejs/plugin-react": "^6.0.1", |
||||
"eslint": "^9.39.4", |
||||
"eslint-plugin-react-hooks": "^7.0.1", |
||||
"eslint-plugin-react-refresh": "^0.5.2", |
||||
"globals": "^17.4.0", |
||||
"tailwindcss": "^4.2.2", |
||||
"typescript": "~5.9.3", |
||||
"typescript-eslint": "^8.57.0", |
||||
"vite": "^8.0.1" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 9.3 KiB |
@ -0,0 +1,49 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate, Outlet } from "react-router-dom"; |
||||
import { Loader2 } from "lucide-react"; |
||||
import { AuthProvider, useAuth } from "@/context/AuthContext"; |
||||
import Layout from "@/components/Layout"; |
||||
import HomePage from "@/pages/HomePage"; |
||||
import QuestionsPage from "@/pages/QuestionsPage"; |
||||
import TextbookPage from "@/pages/TextbookPage"; |
||||
import TestPage from "@/pages/TestPage"; |
||||
import ReportPage from "@/pages/ReportPage"; |
||||
import ArchivePage from "@/pages/ArchivePage"; |
||||
import SettingsPage from "@/pages/SettingsPage"; |
||||
import LoginPage from "@/pages/LoginPage"; |
||||
|
||||
function RequireAuth() { |
||||
const { user, loading } = useAuth(); |
||||
if (loading) { |
||||
return ( |
||||
<div className="min-h-screen flex items-center justify-center bg-background"> |
||||
<Loader2 className="animate-spin text-primary" size={28} /> |
||||
</div> |
||||
); |
||||
} |
||||
if (!user) return <Navigate to="/login" replace />; |
||||
return <Outlet />; |
||||
} |
||||
|
||||
export default function App() { |
||||
return ( |
||||
<BrowserRouter> |
||||
<AuthProvider> |
||||
<Routes> |
||||
<Route path="/login" element={<LoginPage />} /> |
||||
<Route element={<RequireAuth />}> |
||||
<Route element={<Layout />}> |
||||
<Route path="/" element={<HomePage />} /> |
||||
<Route path="/questions" element={<QuestionsPage />} /> |
||||
<Route path="/textbook" element={<TextbookPage />} /> |
||||
<Route path="/test" element={<TestPage />} /> |
||||
<Route path="/report" element={<ReportPage />} /> |
||||
<Route path="/archive" element={<ArchivePage />} /> |
||||
<Route path="/settings" element={<SettingsPage />} /> |
||||
</Route> |
||||
</Route> |
||||
<Route path="*" element={<Navigate to="/" replace />} /> |
||||
</Routes> |
||||
</AuthProvider> |
||||
</BrowserRouter> |
||||
); |
||||
} |
||||
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
@ -0,0 +1,108 @@
|
||||
import { NavLink, Outlet, useLocation } from "react-router-dom"; |
||||
import { |
||||
MessageCircle, |
||||
HelpCircle, |
||||
BookOpen, |
||||
ClipboardList, |
||||
FileText, |
||||
Settings, |
||||
Sparkles, |
||||
Archive, |
||||
LogOut, |
||||
} from "lucide-react"; |
||||
import { cn } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import { Button } from "@/components/ui/button"; |
||||
|
||||
const baseNavItems = [ |
||||
{ to: "/", icon: MessageCircle, label: "Чат" }, |
||||
{ to: "/questions", icon: HelpCircle, label: "Вопросы" }, |
||||
{ to: "/textbook", icon: BookOpen, label: "Учебник" }, |
||||
{ to: "/test", icon: ClipboardList, label: "Тест" }, |
||||
{ to: "/report", icon: FileText, label: "Зал" }, |
||||
{ to: "/archive", icon: Archive, label: "Архив" }, |
||||
] as const; |
||||
|
||||
export default function Layout() { |
||||
const location = useLocation(); |
||||
const { user, logout } = useAuth(); |
||||
const isTutor = user?.role === "TUTOR"; |
||||
|
||||
const navItems = isTutor |
||||
? [...baseNavItems, { to: "/settings", icon: Settings, label: "Настройки" } as const] |
||||
: [...baseNavItems]; |
||||
|
||||
return ( |
||||
<div className="flex h-screen bg-background"> |
||||
<aside className="w-[220px] border-r border-border/60 flex flex-col shrink-0 bg-sidebar"> |
||||
<div className="p-5 pb-4"> |
||||
<div className="flex items-center gap-2.5"> |
||||
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center animate-pulse-glow"> |
||||
<Sparkles size={16} className="text-white" /> |
||||
</div> |
||||
<span className="text-[15px] font-semibold tracking-tight text-foreground"> |
||||
EduHelper |
||||
</span> |
||||
</div> |
||||
{user && ( |
||||
<p className="text-[11px] text-muted-foreground mt-2 truncate" title={user.username}> |
||||
{user.displayName || user.username} |
||||
{isTutor ? ( |
||||
<span className="block text-[10px] opacity-70">наставник</span> |
||||
) : ( |
||||
<span className="block text-[10px] opacity-70">ученик</span> |
||||
)} |
||||
</p> |
||||
)} |
||||
</div> |
||||
|
||||
<nav className="flex-1 px-3 space-y-0.5"> |
||||
{navItems.map(({ to, icon: Icon, label }, i) => { |
||||
const isActive = |
||||
to === "/" ? location.pathname === "/" : location.pathname.startsWith(to); |
||||
|
||||
return ( |
||||
<NavLink |
||||
key={to} |
||||
to={to} |
||||
style={{ animationDelay: `${i * 40}ms` }} |
||||
className={cn( |
||||
"flex items-center gap-2.5 rounded-xl px-3 py-2.5 text-[13px] font-medium transition-all duration-200 animate-slide-in", |
||||
isActive |
||||
? "bg-sidebar-active text-primary shadow-sm" |
||||
: "text-muted-foreground hover:bg-muted/60 hover:text-foreground" |
||||
)} |
||||
> |
||||
<Icon size={17} strokeWidth={isActive ? 2 : 1.7} /> |
||||
{label} |
||||
</NavLink> |
||||
); |
||||
})} |
||||
</nav> |
||||
|
||||
<div className="p-3 pb-4 space-y-2"> |
||||
<Button |
||||
variant="ghost" |
||||
size="sm" |
||||
className="w-full justify-start text-muted-foreground text-[13px]" |
||||
onClick={() => logout()} |
||||
> |
||||
<LogOut size={16} className="mr-2" /> |
||||
Выйти |
||||
</Button> |
||||
<div className="rounded-xl bg-accent/50 p-3 text-center"> |
||||
<p className="text-[11px] text-muted-foreground leading-relaxed"> |
||||
Powered by DeepSeek |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</aside> |
||||
|
||||
<main className="flex-1 overflow-y-auto"> |
||||
<div className="max-w-3xl mx-auto px-6 py-6 animate-fade-in" key={location.pathname}> |
||||
<Outlet /> |
||||
</div> |
||||
</main> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,85 @@
|
||||
import { useRef } from "react"; |
||||
import ReactMarkdown from "react-markdown"; |
||||
import remarkGfm from "remark-gfm"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
interface MarkdownProps { |
||||
children: string; |
||||
className?: string; |
||||
exportable?: boolean; |
||||
exportTitle?: string; |
||||
} |
||||
|
||||
export default function Markdown({ |
||||
children, |
||||
className = "", |
||||
exportable = false, |
||||
exportTitle = "document", |
||||
}: MarkdownProps) { |
||||
const ref = useRef<HTMLDivElement>(null); |
||||
|
||||
async function exportPdf() { |
||||
const el = ref.current; |
||||
if (!el) return; |
||||
|
||||
const { default: html2canvas } = await import("html2canvas"); |
||||
const { default: jsPDF } = await import("jspdf"); |
||||
|
||||
const canvas = await html2canvas(el, { |
||||
scale: 2, |
||||
useCORS: true, |
||||
backgroundColor: "#ffffff", |
||||
}); |
||||
|
||||
const imgData = canvas.toDataURL("image/png"); |
||||
const imgWidth = 190; |
||||
const pageHeight = 277; |
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width; |
||||
|
||||
const pdf = new jsPDF("p", "mm", "a4"); |
||||
let heightLeft = imgHeight; |
||||
let position = 10; |
||||
|
||||
pdf.addImage(imgData, "PNG", 10, position, imgWidth, imgHeight); |
||||
heightLeft -= pageHeight; |
||||
|
||||
while (heightLeft > 0) { |
||||
position = heightLeft - imgHeight + 10; |
||||
pdf.addPage(); |
||||
pdf.addImage(imgData, "PNG", 10, position, imgWidth, imgHeight); |
||||
heightLeft -= pageHeight; |
||||
} |
||||
|
||||
pdf.save(`${exportTitle}.pdf`); |
||||
} |
||||
|
||||
return ( |
||||
<div className="relative group"> |
||||
{exportable && ( |
||||
<button |
||||
onClick={exportPdf} |
||||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-xs bg-primary text-primary-foreground px-3 py-1.5 rounded-lg shadow-sm hover:bg-primary/90 cursor-pointer z-10" |
||||
> |
||||
PDF |
||||
</button> |
||||
)} |
||||
<div |
||||
ref={ref} |
||||
className={cn("prose prose-sm max-w-none text-[14px]", className)} |
||||
> |
||||
<ReactMarkdown |
||||
remarkPlugins={[remarkGfm]} |
||||
components={{ |
||||
table: ({ children, ...props }) => ( |
||||
<div className="overflow-x-auto rounded-lg my-3"> |
||||
<table {...props}>{children}</table> |
||||
</div> |
||||
), |
||||
}} |
||||
> |
||||
{children} |
||||
</ReactMarkdown> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,48 @@
|
||||
import { type ButtonHTMLAttributes, forwardRef } from "react"; |
||||
import { cva, type VariantProps } from "class-variance-authority"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
const buttonVariants = cva( |
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer active:scale-[0.98]", |
||||
{ |
||||
variants: { |
||||
variant: { |
||||
default: |
||||
"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20", |
||||
destructive: |
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90", |
||||
outline: |
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground hover:border-primary/30", |
||||
secondary: |
||||
"bg-secondary text-secondary-foreground hover:bg-muted", |
||||
ghost: |
||||
"hover:bg-accent hover:text-accent-foreground", |
||||
link: |
||||
"text-primary underline-offset-4 hover:underline", |
||||
}, |
||||
size: { |
||||
default: "h-10 px-4 py-2", |
||||
sm: "h-9 rounded-lg px-3 text-xs", |
||||
lg: "h-11 rounded-xl px-6", |
||||
icon: "h-10 w-10", |
||||
}, |
||||
}, |
||||
defaultVariants: { |
||||
variant: "default", |
||||
size: "default", |
||||
}, |
||||
} |
||||
); |
||||
|
||||
export interface ButtonProps |
||||
extends ButtonHTMLAttributes<HTMLButtonElement>, |
||||
VariantProps<typeof buttonVariants> {} |
||||
|
||||
const Button = forwardRef<HTMLButtonElement, ButtonProps>( |
||||
({ className, variant, size, ...props }, ref) => ( |
||||
<button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> |
||||
) |
||||
); |
||||
Button.displayName = "Button"; |
||||
|
||||
export { Button, buttonVariants }; |
||||
@ -0,0 +1,43 @@
|
||||
import { type HTMLAttributes, forwardRef } from "react"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<div |
||||
ref={ref} |
||||
className={cn( |
||||
"rounded-2xl border bg-card text-card-foreground shadow-sm glow-card", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
); |
||||
Card.displayName = "Card"; |
||||
|
||||
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-5 pb-3", className)} {...props} /> |
||||
) |
||||
); |
||||
CardHeader.displayName = "CardHeader"; |
||||
|
||||
const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<h3 |
||||
ref={ref} |
||||
className={cn("text-base font-semibold leading-none tracking-tight", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
); |
||||
CardTitle.displayName = "CardTitle"; |
||||
|
||||
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<div ref={ref} className={cn("p-5 pt-0", className)} {...props} /> |
||||
) |
||||
); |
||||
CardContent.displayName = "CardContent"; |
||||
|
||||
export { Card, CardHeader, CardTitle, CardContent }; |
||||
@ -0,0 +1,19 @@
|
||||
import { type InputHTMLAttributes, forwardRef } from "react"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>( |
||||
({ className, type, ...props }, ref) => ( |
||||
<input |
||||
type={type} |
||||
className={cn( |
||||
"flex h-10 w-full rounded-xl border border-input bg-background px-3.5 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50", |
||||
className |
||||
)} |
||||
ref={ref} |
||||
{...props} |
||||
/> |
||||
) |
||||
); |
||||
Input.displayName = "Input"; |
||||
|
||||
export { Input }; |
||||
@ -0,0 +1,15 @@
|
||||
import { type LabelHTMLAttributes, forwardRef } from "react"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
const Label = forwardRef<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<label |
||||
ref={ref} |
||||
className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
); |
||||
Label.displayName = "Label"; |
||||
|
||||
export { Label }; |
||||
@ -0,0 +1,18 @@
|
||||
import { type TextareaHTMLAttributes, forwardRef } from "react"; |
||||
import { cn } from "@/lib/utils"; |
||||
|
||||
const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>( |
||||
({ className, ...props }, ref) => ( |
||||
<textarea |
||||
className={cn( |
||||
"flex min-h-[80px] w-full rounded-xl border border-input bg-background px-3.5 py-3 text-sm transition-all duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 resize-none", |
||||
className |
||||
)} |
||||
ref={ref} |
||||
{...props} |
||||
/> |
||||
) |
||||
); |
||||
Textarea.displayName = "Textarea"; |
||||
|
||||
export { Textarea }; |
||||
@ -0,0 +1,68 @@
|
||||
import { |
||||
createContext, |
||||
useCallback, |
||||
useContext, |
||||
useEffect, |
||||
useMemo, |
||||
useState, |
||||
type ReactNode, |
||||
} from "react"; |
||||
import { API_BASE, apiFetch } from "@/lib/utils"; |
||||
|
||||
export type UserRole = "TUTOR" | "STUDENT"; |
||||
|
||||
export interface AuthUser { |
||||
id: number; |
||||
username: string; |
||||
role: UserRole; |
||||
displayName: string | null; |
||||
} |
||||
|
||||
interface AuthState { |
||||
user: AuthUser | null; |
||||
loading: boolean; |
||||
refresh: () => Promise<void>; |
||||
logout: () => Promise<void>; |
||||
setUser: (u: AuthUser | null) => void; |
||||
} |
||||
|
||||
const AuthContext = createContext<AuthState | null>(null); |
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) { |
||||
const [user, setUser] = useState<AuthUser | null>(null); |
||||
const [loading, setLoading] = useState(true); |
||||
|
||||
const refresh = useCallback(async () => { |
||||
try { |
||||
const data = await apiFetch<{ user: AuthUser }>("/auth/me", { skipAuthRedirect: true }); |
||||
setUser(data.user); |
||||
} catch { |
||||
setUser(null); |
||||
} finally { |
||||
setLoading(false); |
||||
} |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
refresh(); |
||||
}, [refresh]); |
||||
|
||||
const logout = useCallback(async () => { |
||||
await fetch(`${API_BASE}/auth/logout`, { method: "POST", credentials: "include" }); |
||||
setUser(null); |
||||
window.location.assign("/login"); |
||||
}, []); |
||||
|
||||
const value = useMemo( |
||||
() => ({ user, loading, refresh, logout, setUser }), |
||||
[user, loading, refresh, logout] |
||||
); |
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; |
||||
} |
||||
|
||||
export function useAuth(): AuthState { |
||||
const ctx = useContext(AuthContext); |
||||
if (!ctx) throw new Error("useAuth must be used within AuthProvider"); |
||||
return ctx; |
||||
} |
||||
@ -0,0 +1,224 @@
|
||||
@import "tailwindcss"; |
||||
|
||||
@theme { |
||||
--color-background: #ffffff; |
||||
--color-foreground: #0f172a; |
||||
--color-primary: #4f46e5; |
||||
--color-primary-foreground: #ffffff; |
||||
--color-secondary: #f8fafc; |
||||
--color-secondary-foreground: #1e293b; |
||||
--color-muted: #f1f5f9; |
||||
--color-muted-foreground: #64748b; |
||||
--color-accent: #eef2ff; |
||||
--color-accent-foreground: #3730a3; |
||||
--color-destructive: #ef4444; |
||||
--color-destructive-foreground: #ffffff; |
||||
--color-border: #e2e8f0; |
||||
--color-input: #e2e8f0; |
||||
--color-ring: #4f46e5; |
||||
--color-card: #ffffff; |
||||
--color-card-foreground: #0f172a; |
||||
--color-sidebar: #fafbfc; |
||||
--color-sidebar-active: #eef2ff; |
||||
--color-glow: rgba(79, 70, 229, 0.15); |
||||
--color-glow-strong: rgba(79, 70, 229, 0.25); |
||||
--radius-sm: 0.375rem; |
||||
--radius-md: 0.5rem; |
||||
--radius-lg: 0.75rem; |
||||
--radius-xl: 1rem; |
||||
--radius-2xl: 1.25rem; |
||||
} |
||||
|
||||
@keyframes fade-in { |
||||
from { opacity: 0; transform: translateY(8px); } |
||||
to { opacity: 1; transform: translateY(0); } |
||||
} |
||||
|
||||
@keyframes slide-in-left { |
||||
from { opacity: 0; transform: translateX(-12px); } |
||||
to { opacity: 1; transform: translateX(0); } |
||||
} |
||||
|
||||
@keyframes pulse-glow { |
||||
0%, 100% { box-shadow: 0 0 15px var(--color-glow); } |
||||
50% { box-shadow: 0 0 30px var(--color-glow-strong); } |
||||
} |
||||
|
||||
@keyframes typing-dot { |
||||
0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } |
||||
30% { opacity: 1; transform: scale(1); } |
||||
} |
||||
|
||||
@keyframes shimmer { |
||||
0% { background-position: -200% 0; } |
||||
100% { background-position: 200% 0; } |
||||
} |
||||
|
||||
@keyframes float { |
||||
0%, 100% { transform: translateY(0); } |
||||
50% { transform: translateY(-4px); } |
||||
} |
||||
|
||||
* { |
||||
border-color: var(--color-border); |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
||||
background-color: var(--color-background); |
||||
color: var(--color-foreground); |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
letter-spacing: -0.011em; |
||||
} |
||||
|
||||
.animate-fade-in { |
||||
animation: fade-in 0.4s ease-out both; |
||||
} |
||||
|
||||
.animate-slide-in { |
||||
animation: slide-in-left 0.3s ease-out both; |
||||
} |
||||
|
||||
.animate-pulse-glow { |
||||
animation: pulse-glow 2.5s ease-in-out infinite; |
||||
} |
||||
|
||||
.animate-float { |
||||
animation: float 3s ease-in-out infinite; |
||||
} |
||||
|
||||
.glow-card { |
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
||||
} |
||||
|
||||
.glow-card:hover { |
||||
box-shadow: |
||||
0 0 0 1px rgba(79, 70, 229, 0.08), |
||||
0 4px 20px rgba(79, 70, 229, 0.08), |
||||
0 1px 3px rgba(0, 0, 0, 0.04); |
||||
transform: translateY(-1px); |
||||
} |
||||
|
||||
.glass { |
||||
background: rgba(255, 255, 255, 0.85); |
||||
backdrop-filter: blur(12px); |
||||
-webkit-backdrop-filter: blur(12px); |
||||
} |
||||
|
||||
.typing-indicator span { |
||||
display: inline-block; |
||||
width: 6px; |
||||
height: 6px; |
||||
border-radius: 50%; |
||||
background: var(--color-primary); |
||||
margin: 0 2px; |
||||
} |
||||
|
||||
.typing-indicator span:nth-child(1) { animation: typing-dot 1.4s ease-in-out infinite 0s; } |
||||
.typing-indicator span:nth-child(2) { animation: typing-dot 1.4s ease-in-out infinite 0.2s; } |
||||
.typing-indicator span:nth-child(3) { animation: typing-dot 1.4s ease-in-out infinite 0.4s; } |
||||
|
||||
.shimmer { |
||||
background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.04) 50%, transparent 100%); |
||||
background-size: 200% 100%; |
||||
animation: shimmer 2s ease-in-out infinite; |
||||
} |
||||
|
||||
.prose h1, .prose h2, .prose h3, .prose h4 { |
||||
color: var(--color-foreground); |
||||
font-weight: 600; |
||||
letter-spacing: -0.02em; |
||||
} |
||||
|
||||
.prose p { |
||||
line-height: 1.7; |
||||
color: #374151; |
||||
} |
||||
|
||||
.prose code { |
||||
background: var(--color-muted); |
||||
padding: 2px 6px; |
||||
border-radius: 4px; |
||||
font-size: 0.875em; |
||||
color: var(--color-primary); |
||||
} |
||||
|
||||
.prose pre { |
||||
background: #1e293b; |
||||
color: #e2e8f0; |
||||
border-radius: 0.75rem; |
||||
padding: 1rem; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.prose table { |
||||
width: 100%; |
||||
border-collapse: collapse; |
||||
margin: 1em 0; |
||||
font-size: 0.85em; |
||||
display: table; |
||||
overflow-x: auto; |
||||
border-radius: 8px; |
||||
border: 1px solid var(--color-border); |
||||
} |
||||
|
||||
.prose thead { |
||||
background: var(--color-muted); |
||||
} |
||||
|
||||
.prose th, .prose td { |
||||
border: 1px solid var(--color-border); |
||||
padding: 10px 14px; |
||||
text-align: left; |
||||
vertical-align: top; |
||||
line-height: 1.5; |
||||
word-break: break-word; |
||||
} |
||||
|
||||
.prose th { |
||||
font-weight: 600; |
||||
color: var(--color-foreground); |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.prose td code { |
||||
font-size: 0.82em; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.prose tr:nth-child(even) { |
||||
background: var(--color-secondary); |
||||
} |
||||
|
||||
.prose tr:hover { |
||||
background: var(--color-accent); |
||||
} |
||||
|
||||
@keyframes spin-glow { |
||||
0% { transform: rotate(0deg); filter: drop-shadow(0 0 3px var(--color-glow)); } |
||||
50% { filter: drop-shadow(0 0 8px var(--color-glow-strong)); } |
||||
100% { transform: rotate(360deg); filter: drop-shadow(0 0 3px var(--color-glow)); } |
||||
} |
||||
|
||||
.animate-spin-glow { |
||||
animation: spin-glow 2s linear infinite; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: transparent; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
background: #cbd5e1; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: #94a3b8; |
||||
} |
||||
@ -0,0 +1,52 @@
|
||||
import { type ClassValue, clsx } from "clsx"; |
||||
import { twMerge } from "tailwind-merge"; |
||||
|
||||
export function cn(...inputs: ClassValue[]) { |
||||
return twMerge(clsx(inputs)); |
||||
} |
||||
|
||||
export const API_BASE = "/api"; |
||||
|
||||
export type ApiFetchOptions = RequestInit & { |
||||
skipAuthRedirect?: boolean; |
||||
}; |
||||
|
||||
export async function apiFetch<T>(path: string, options?: ApiFetchOptions): Promise<T> { |
||||
const { skipAuthRedirect, ...init } = options || {}; |
||||
|
||||
const res = await fetch(`${API_BASE}${path}`, { |
||||
credentials: "include", |
||||
headers: { "Content-Type": "application/json", ...(init.headers || {}) }, |
||||
...init, |
||||
}); |
||||
|
||||
if (res.status === 401) { |
||||
if ( |
||||
typeof window !== "undefined" && |
||||
!window.location.pathname.startsWith("/login") && |
||||
!skipAuthRedirect |
||||
) { |
||||
window.location.assign("/login"); |
||||
} |
||||
const err = await res.json().catch(() => ({ error: "Network error" })); |
||||
throw new Error(err.error || `HTTP ${res.status}`); |
||||
} |
||||
|
||||
if (!res.ok) { |
||||
const err = await res.json().catch(() => ({ error: "Network error" })); |
||||
throw new Error(err.error || `HTTP ${res.status}`); |
||||
} |
||||
|
||||
return res.json(); |
||||
} |
||||
|
||||
export function getGreeting(): string { |
||||
const hour = new Date().getHours(); |
||||
if (hour < 12) return "Доброе утро"; |
||||
if (hour < 18) return "Добрый день"; |
||||
return "Добрый вечер"; |
||||
} |
||||
|
||||
export function todayDate(): string { |
||||
return new Date().toISOString().split("T")[0]; |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react' |
||||
import { createRoot } from 'react-dom/client' |
||||
import './index.css' |
||||
import App from './App.tsx' |
||||
|
||||
createRoot(document.getElementById('root')!).render( |
||||
<StrictMode> |
||||
<App /> |
||||
</StrictMode>, |
||||
) |
||||
@ -0,0 +1,342 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Card, CardContent } from "@/components/ui/card"; |
||||
import { Search, HelpCircle, BookOpen, Image as ImageIcon, ChevronDown, Trash2 } from "lucide-react"; |
||||
import { apiFetch } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import Markdown from "@/components/Markdown"; |
||||
|
||||
type Tab = "questions" | "textbooks" | "hall"; |
||||
|
||||
interface Question { |
||||
id: number; |
||||
text: string; |
||||
answer: string | null; |
||||
date: string; |
||||
createdAt: string; |
||||
} |
||||
|
||||
interface Textbook { |
||||
id: number; |
||||
topic: string; |
||||
content: string; |
||||
createdAt: string; |
||||
} |
||||
|
||||
interface HallPhoto { |
||||
id: number; |
||||
date: string; |
||||
imageUrl: string; |
||||
createdAt: string; |
||||
fileName: string; |
||||
displayName: string; |
||||
} |
||||
|
||||
function groupByDate<T extends { date?: string; createdAt: string }>( |
||||
items: T[], |
||||
dateKey: "date" | "createdAt" = "createdAt" |
||||
): Record<string, T[]> { |
||||
const groups: Record<string, T[]> = {}; |
||||
for (const item of items) { |
||||
const d = dateKey === "date" && "date" in item && item.date |
||||
? item.date |
||||
: item.createdAt.split("T")[0]; |
||||
if (!groups[d]) groups[d] = []; |
||||
groups[d].push(item); |
||||
} |
||||
return groups; |
||||
} |
||||
|
||||
function formatDate(d: string): string { |
||||
const date = new Date(d); |
||||
const today = new Date(); |
||||
const yesterday = new Date(); |
||||
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
||||
if (d === today.toISOString().split("T")[0]) return "Сегодня"; |
||||
if (d === yesterday.toISOString().split("T")[0]) return "Вчера"; |
||||
return date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); |
||||
} |
||||
|
||||
export default function ArchivePage() { |
||||
const { user } = useAuth(); |
||||
const canDeleteQuestions = user?.role === "STUDENT"; |
||||
const canManageHallPhotos = user?.username?.toLowerCase() === "konstantin"; |
||||
const [tab, setTab] = useState<Tab>("questions"); |
||||
const [search, setSearch] = useState(""); |
||||
const [questions, setQuestions] = useState<Question[]>([]); |
||||
const [textbooks, setTextbooks] = useState<Textbook[]>([]); |
||||
const [hall, setHall] = useState<HallPhoto[]>([]); |
||||
const [expandedTextbook, setExpandedTextbook] = useState<number | null>(null); |
||||
const [expandedQuestion, setExpandedQuestion] = useState<number | null>(null); |
||||
|
||||
useEffect(() => { |
||||
loadAll(); |
||||
}, []); |
||||
|
||||
async function loadAll() { |
||||
try { setQuestions(await apiFetch<Question[]>("/questions")); } catch {} |
||||
try { setTextbooks(await apiFetch<Textbook[]>("/textbooks")); } catch {} |
||||
try { setHall(await apiFetch<HallPhoto[]>("/reports")); } catch {} |
||||
} |
||||
|
||||
async function deleteQuestion(id: number) { |
||||
if (!canDeleteQuestions || !confirm("Удалить этот вопрос безвозвратно?")) return; |
||||
try { |
||||
await apiFetch(`/questions/${id}`, { method: "DELETE" }); |
||||
setQuestions((prev) => prev.filter((q) => q.id !== id)); |
||||
} catch (err: unknown) { |
||||
alert(err instanceof Error ? err.message : "Ошибка"); |
||||
} |
||||
} |
||||
|
||||
async function deleteHallPhoto(id: number) { |
||||
if (!canManageHallPhotos || !confirm("Удалить это фото?")) return; |
||||
try { |
||||
await apiFetch(`/reports/${id}`, { method: "DELETE" }); |
||||
setHall((prev) => prev.filter((h) => h.id !== id)); |
||||
} catch (err: unknown) { |
||||
alert(err instanceof Error ? err.message : "Ошибка"); |
||||
} |
||||
} |
||||
|
||||
const tabs: { key: Tab; label: string; icon: typeof HelpCircle; count: number }[] = [ |
||||
{ key: "questions", label: "Вопросы", icon: HelpCircle, count: questions.length }, |
||||
{ key: "textbooks", label: "Учебники", icon: BookOpen, count: textbooks.length }, |
||||
{ key: "hall", label: "Зал", icon: ImageIcon, count: hall.length }, |
||||
]; |
||||
|
||||
const filteredQuestions = questions.filter( |
||||
(q) => q.text.toLowerCase().includes(search.toLowerCase()) || |
||||
(q.answer && q.answer.toLowerCase().includes(search.toLowerCase())) |
||||
); |
||||
|
||||
const filteredTextbooks = textbooks.filter( |
||||
(t) => t.topic.toLowerCase().includes(search.toLowerCase()) || |
||||
t.content.toLowerCase().includes(search.toLowerCase()) |
||||
); |
||||
|
||||
const filteredHall = hall.filter((r) => |
||||
r.date.toLowerCase().includes(search.toLowerCase()) |
||||
); |
||||
|
||||
const questionGroups = groupByDate(filteredQuestions, "date"); |
||||
const textbookGroups = groupByDate(filteredTextbooks); |
||||
const hallGroups = groupByDate(filteredHall, "date"); |
||||
|
||||
const sortedDates = (groups: Record<string, unknown[]>) => |
||||
Object.keys(groups).sort((a, b) => b.localeCompare(a)); |
||||
|
||||
return ( |
||||
<div className="space-y-5"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Архив</h1> |
||||
<p className="text-sm text-muted-foreground mt-1">Все материалы, сгруппированные по дням</p> |
||||
</div> |
||||
|
||||
{/* Tabs */} |
||||
<div className="flex gap-1 p-1 bg-muted rounded-xl"> |
||||
{tabs.map(({ key, label, icon: Icon, count }) => ( |
||||
<button |
||||
key={key} |
||||
onClick={() => { setTab(key); setSearch(""); }} |
||||
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-xs font-medium transition-all duration-200 cursor-pointer ${ |
||||
tab === key |
||||
? "bg-background text-foreground shadow-sm" |
||||
: "text-muted-foreground hover:text-foreground" |
||||
}`}
|
||||
> |
||||
<Icon size={14} /> |
||||
{label} |
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded-full ${ |
||||
tab === key ? "bg-primary/10 text-primary" : "bg-muted-foreground/10" |
||||
}`}>
|
||||
{count} |
||||
</span> |
||||
</button> |
||||
))} |
||||
</div> |
||||
|
||||
{/* Search */} |
||||
<div className="relative"> |
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" /> |
||||
<Input |
||||
value={search} |
||||
onChange={(e) => setSearch(e.target.value)} |
||||
placeholder={`Поиск по ${tab === "questions" ? "вопросам" : tab === "textbooks" ? "учебникам" : "фото"}...`} |
||||
className="pl-9" |
||||
/> |
||||
</div> |
||||
|
||||
{/* Questions */} |
||||
{tab === "questions" && ( |
||||
<div className="space-y-5"> |
||||
{sortedDates(questionGroups).map((date) => ( |
||||
<div key={date} className="animate-fade-in"> |
||||
<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2"> |
||||
{formatDate(date)} |
||||
<span className="ml-2 text-[10px] opacity-60">({questionGroups[date].length})</span> |
||||
</h3> |
||||
<div className="space-y-2"> |
||||
{questionGroups[date].map((q) => ( |
||||
<Card key={q.id}> |
||||
<CardContent className="pt-4 pb-4"> |
||||
<div className="flex items-start gap-1"> |
||||
<button |
||||
type="button" |
||||
onClick={() => setExpandedQuestion(expandedQuestion === q.id ? null : q.id)} |
||||
className="flex-1 min-w-0 text-left flex items-start justify-between gap-2 cursor-pointer" |
||||
> |
||||
<div className="flex-1 min-w-0"> |
||||
<p className="text-sm font-medium">{q.text}</p> |
||||
{q.answer && expandedQuestion !== q.id && ( |
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-1">{q.answer.slice(0, 100)}...</p> |
||||
)} |
||||
</div> |
||||
{q.answer && ( |
||||
<ChevronDown |
||||
size={15} |
||||
className={`text-muted-foreground shrink-0 mt-0.5 transition-transform duration-200 ${ |
||||
expandedQuestion === q.id ? "rotate-180" : "" |
||||
}`}
|
||||
/> |
||||
)} |
||||
</button> |
||||
{canDeleteQuestions && ( |
||||
<Button |
||||
variant="ghost" |
||||
size="icon" |
||||
className="h-8 w-8 shrink-0 text-destructive" |
||||
title="Удалить вопрос" |
||||
type="button" |
||||
onClick={() => deleteQuestion(q.id)} |
||||
> |
||||
<Trash2 size={14} /> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
{expandedQuestion === q.id && q.answer && ( |
||||
<div className="mt-3 pt-3 border-t animate-fade-in"> |
||||
<Markdown className="text-[13px]">{q.answer}</Markdown> |
||||
</div> |
||||
)} |
||||
</CardContent> |
||||
</Card> |
||||
))} |
||||
</div> |
||||
</div> |
||||
))} |
||||
{filteredQuestions.length === 0 && ( |
||||
<p className="text-center text-sm text-muted-foreground py-12"> |
||||
{search ? "Ничего не найдено" : "Нет вопросов"} |
||||
</p> |
||||
)} |
||||
</div> |
||||
)} |
||||
|
||||
{/* Textbooks */} |
||||
{tab === "textbooks" && ( |
||||
<div className="space-y-5"> |
||||
{sortedDates(textbookGroups).map((date) => ( |
||||
<div key={date} className="animate-fade-in"> |
||||
<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2"> |
||||
{formatDate(date)} |
||||
</h3> |
||||
<div className="space-y-2"> |
||||
{textbookGroups[date].map((tb) => ( |
||||
<Card key={tb.id}> |
||||
<CardContent className="pt-4 pb-4"> |
||||
<button |
||||
onClick={() => setExpandedTextbook(expandedTextbook === tb.id ? null : tb.id)} |
||||
className="w-full text-left flex items-center justify-between cursor-pointer" |
||||
> |
||||
<span className="text-sm font-medium">{tb.topic}</span> |
||||
<ChevronDown |
||||
size={15} |
||||
className={`text-muted-foreground shrink-0 transition-transform duration-200 ${ |
||||
expandedTextbook === tb.id ? "rotate-180" : "" |
||||
}`}
|
||||
/> |
||||
</button> |
||||
{expandedTextbook === tb.id && ( |
||||
<div className="mt-3 pt-3 border-t animate-fade-in"> |
||||
<Markdown className="text-[13px]">{tb.content}</Markdown> |
||||
</div> |
||||
)} |
||||
</CardContent> |
||||
</Card> |
||||
))} |
||||
</div> |
||||
</div> |
||||
))} |
||||
{filteredTextbooks.length === 0 && ( |
||||
<p className="text-center text-sm text-muted-foreground py-12"> |
||||
{search ? "Ничего не найдено" : "Нет учебников"} |
||||
</p> |
||||
)} |
||||
</div> |
||||
)} |
||||
|
||||
{/* Hall */} |
||||
{tab === "hall" && ( |
||||
<div className="space-y-5"> |
||||
{sortedDates(hallGroups).map((date) => ( |
||||
<div key={date} className="animate-fade-in"> |
||||
<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2"> |
||||
{formatDate(date)} |
||||
</h3> |
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3"> |
||||
{hallGroups[date].map((r) => { |
||||
const label = r.displayName || r.fileName; |
||||
return ( |
||||
<div |
||||
key={r.id} |
||||
className="relative flex flex-col rounded-xl overflow-hidden border bg-accent/20 hover:shadow-sm transition" |
||||
> |
||||
<div className="relative"> |
||||
<button |
||||
type="button" |
||||
className="block w-full" |
||||
onClick={() => window.open(r.imageUrl, "_blank", "noopener,noreferrer")} |
||||
> |
||||
<img src={r.imageUrl} alt={label} className="w-full h-36 object-cover" /> |
||||
</button> |
||||
{canManageHallPhotos && ( |
||||
<Button |
||||
type="button" |
||||
variant="destructive" |
||||
size="icon" |
||||
className="absolute top-2 right-2 h-8 w-8 opacity-90 shadow-md" |
||||
title="Удалить" |
||||
onClick={(e) => { |
||||
e.stopPropagation(); |
||||
deleteHallPhoto(r.id); |
||||
}} |
||||
> |
||||
<Trash2 size={14} /> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
<p |
||||
className="text-[11px] px-2 py-1.5 text-muted-foreground truncate border-t bg-background/95" |
||||
title={label} |
||||
> |
||||
{label} |
||||
</p> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
</div> |
||||
))} |
||||
{filteredHall.length === 0 && ( |
||||
<p className="text-center text-sm text-muted-foreground py-12"> |
||||
{search ? "Ничего не найдено" : "Нет фото"} |
||||
</p> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,201 @@
|
||||
import { useState, useEffect, useRef } from "react"; |
||||
import { Send, Trash2, Sparkles } from "lucide-react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { getGreeting, apiFetch, API_BASE } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import Markdown from "@/components/Markdown"; |
||||
|
||||
interface ChatMsg { |
||||
id?: number; |
||||
role: "user" | "assistant"; |
||||
content: string; |
||||
} |
||||
|
||||
export default function HomePage() { |
||||
const { user } = useAuth(); |
||||
const [messages, setMessages] = useState<ChatMsg[]>([]); |
||||
const [input, setInput] = useState(""); |
||||
const [loading, setLoading] = useState(false); |
||||
const bottomRef = useRef<HTMLDivElement>(null); |
||||
const inputRef = useRef<HTMLTextAreaElement>(null); |
||||
|
||||
useEffect(() => { |
||||
apiFetch<ChatMsg[]>("/chat/history").then(setMessages).catch(() => {}); |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" }); |
||||
}, [messages]); |
||||
|
||||
function autoResize() { |
||||
const el = inputRef.current; |
||||
if (el) { |
||||
el.style.height = "auto"; |
||||
el.style.height = Math.min(el.scrollHeight, 150) + "px"; |
||||
} |
||||
} |
||||
|
||||
async function sendMessage() { |
||||
if (!input.trim() || loading) return; |
||||
const text = input.trim(); |
||||
setInput(""); |
||||
if (inputRef.current) inputRef.current.style.height = "auto"; |
||||
setMessages((prev) => [...prev, { role: "user", content: text }]); |
||||
setLoading(true); |
||||
|
||||
try { |
||||
const res = await fetch(`${API_BASE}/chat`, { |
||||
method: "POST", |
||||
credentials: "include", |
||||
headers: { "Content-Type": "application/json" }, |
||||
body: JSON.stringify({ message: text }), |
||||
}); |
||||
|
||||
const reader = res.body?.getReader(); |
||||
const decoder = new TextDecoder(); |
||||
let assistantContent = ""; |
||||
setMessages((prev) => [...prev, { role: "assistant", content: "" }]); |
||||
|
||||
while (reader) { |
||||
const { done, value } = await reader.read(); |
||||
if (done) break; |
||||
const chunk = decoder.decode(value); |
||||
const lines = chunk.split("\n").filter((l) => l.startsWith("data: ")); |
||||
|
||||
for (const line of lines) { |
||||
const data = line.slice(6); |
||||
if (data === "[DONE]") break; |
||||
try { |
||||
const parsed = JSON.parse(data); |
||||
if (parsed.content) { |
||||
assistantContent += parsed.content; |
||||
setMessages((prev) => { |
||||
const updated = [...prev]; |
||||
updated[updated.length - 1] = { role: "assistant", content: assistantContent }; |
||||
return updated; |
||||
}); |
||||
} |
||||
} catch { /* skip */ } |
||||
} |
||||
} |
||||
} catch (err: any) { |
||||
setMessages((prev) => [ |
||||
...prev, |
||||
{ role: "assistant", content: `Ошибка: ${err.message}` }, |
||||
]); |
||||
} |
||||
setLoading(false); |
||||
} |
||||
|
||||
async function clearHistory() { |
||||
await apiFetch("/chat/history", { method: "DELETE" }); |
||||
setMessages([]); |
||||
} |
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) { |
||||
if (e.key === "Enter" && !e.shiftKey) { |
||||
e.preventDefault(); |
||||
sendMessage(); |
||||
} |
||||
} |
||||
|
||||
const isEmpty = messages.length === 0; |
||||
|
||||
return ( |
||||
<div className="flex flex-col h-[calc(100vh-3rem)]"> |
||||
{/* Header */} |
||||
<div className="flex items-center justify-between mb-2"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight"> |
||||
{getGreeting()} |
||||
{user?.displayName ? `, ${user.displayName}` : user?.username ? `, ${user.username}` : ""} |
||||
</h1> |
||||
<p className="text-sm text-muted-foreground mt-0.5"> |
||||
Чем могу помочь сегодня? |
||||
</p> |
||||
</div> |
||||
{!isEmpty && ( |
||||
<Button variant="ghost" size="sm" onClick={clearHistory} className="text-muted-foreground"> |
||||
<Trash2 size={15} /> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
|
||||
{/* Messages */} |
||||
<div className="flex-1 overflow-y-auto py-4 space-y-5"> |
||||
{isEmpty && ( |
||||
<div className="flex flex-col items-center justify-center h-full text-center animate-fade-in"> |
||||
<div className="w-14 h-14 rounded-2xl bg-accent flex items-center justify-center mb-5 animate-float"> |
||||
<Sparkles size={26} className="text-primary" /> |
||||
</div> |
||||
<h2 className="text-lg font-semibold mb-2">ИИ-ассистент</h2> |
||||
<p className="text-sm text-muted-foreground max-w-sm leading-relaxed"> |
||||
Задайте любой вопрос — я постараюсь объяснить максимально понятно |
||||
</p> |
||||
</div> |
||||
)} |
||||
|
||||
{messages.map((msg, i) => ( |
||||
<div |
||||
key={i} |
||||
className="animate-fade-in" |
||||
style={{ animationDelay: `${Math.min(i * 30, 200)}ms` }} |
||||
> |
||||
{msg.role === "user" ? ( |
||||
<div className="flex justify-end"> |
||||
<div className="max-w-[75%] bg-primary text-primary-foreground rounded-2xl rounded-br-md px-4 py-2.5 text-[14px] leading-relaxed shadow-sm"> |
||||
{msg.content} |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div className="flex gap-3"> |
||||
<div className={`w-7 h-7 rounded-lg bg-accent flex items-center justify-center shrink-0 mt-0.5 ${ |
||||
loading && i === messages.length - 1 ? "" : "" |
||||
}`}>
|
||||
<Sparkles |
||||
size={14} |
||||
className={`text-primary ${loading && i === messages.length - 1 ? "animate-spin-glow" : ""}`} |
||||
/> |
||||
</div> |
||||
<div className="flex-1 min-w-0"> |
||||
{msg.content ? ( |
||||
<Markdown>{msg.content}</Markdown> |
||||
) : ( |
||||
<div className="typing-indicator flex items-center gap-1 py-3"> |
||||
<span /><span /><span /> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
))} |
||||
<div ref={bottomRef} /> |
||||
</div> |
||||
|
||||
{/* Input */} |
||||
<div className="pt-3 pb-1"> |
||||
<div className="relative flex items-end gap-2 rounded-2xl border bg-background p-2 shadow-sm transition-shadow focus-within:shadow-md focus-within:shadow-primary/5 focus-within:border-primary/30"> |
||||
<textarea |
||||
ref={inputRef} |
||||
value={input} |
||||
onChange={(e) => { setInput(e.target.value); autoResize(); }} |
||||
onKeyDown={handleKeyDown} |
||||
placeholder="Напишите сообщение..." |
||||
disabled={loading} |
||||
rows={1} |
||||
className="flex-1 resize-none bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50 max-h-[150px]" |
||||
/> |
||||
<Button |
||||
onClick={sendMessage} |
||||
disabled={loading || !input.trim()} |
||||
size="icon" |
||||
className="shrink-0 h-8 w-8 rounded-xl" |
||||
> |
||||
<Send size={15} /> |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,98 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { useNavigate } from "react-router-dom"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; |
||||
import { Label } from "@/components/ui/label"; |
||||
import { Loader2, Sparkles } from "lucide-react"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import { API_BASE } from "@/lib/utils"; |
||||
|
||||
export default function LoginPage() { |
||||
const navigate = useNavigate(); |
||||
const { user, loading, setUser } = useAuth(); |
||||
const [username, setUsername] = useState(""); |
||||
const [password, setPassword] = useState(""); |
||||
const [submitting, setSubmitting] = useState(false); |
||||
const [error, setError] = useState(""); |
||||
|
||||
useEffect(() => { |
||||
if (!loading && user) navigate("/", { replace: true }); |
||||
}, [loading, user, navigate]); |
||||
|
||||
async function onSubmit(e: React.FormEvent) { |
||||
e.preventDefault(); |
||||
setError(""); |
||||
setSubmitting(true); |
||||
try { |
||||
const res = await fetch(`${API_BASE}/auth/login`, { |
||||
method: "POST", |
||||
credentials: "include", |
||||
headers: { "Content-Type": "application/json" }, |
||||
body: JSON.stringify({ username: username.trim(), password }), |
||||
}); |
||||
const data = await res.json().catch(() => ({})); |
||||
if (!res.ok) { |
||||
setError(data.error || `Ошибка ${res.status}`); |
||||
return; |
||||
} |
||||
setUser(data.user); |
||||
navigate("/", { replace: true }); |
||||
} catch { |
||||
setError("Сеть недоступна"); |
||||
} finally { |
||||
setSubmitting(false); |
||||
} |
||||
} |
||||
|
||||
if (loading) { |
||||
return ( |
||||
<div className="min-h-screen flex items-center justify-center bg-background"> |
||||
<Loader2 className="animate-spin text-primary" size={28} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className="min-h-screen flex items-center justify-center bg-background p-4"> |
||||
<Card className="w-full max-w-md border-border/80 shadow-lg"> |
||||
<CardHeader className="text-center space-y-2"> |
||||
<div className="mx-auto w-10 h-10 rounded-xl bg-primary flex items-center justify-center"> |
||||
<Sparkles size={20} className="text-white" /> |
||||
</div> |
||||
<CardTitle className="text-lg">EduHelper</CardTitle> |
||||
<p className="text-sm text-muted-foreground">Войдите, чтобы продолжить</p> |
||||
</CardHeader> |
||||
<CardContent> |
||||
<form onSubmit={onSubmit} className="space-y-4"> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="username">Имя пользователя</Label> |
||||
<Input |
||||
id="username" |
||||
autoComplete="username" |
||||
value={username} |
||||
onChange={(e) => setUsername(e.target.value)} |
||||
disabled={submitting} |
||||
/> |
||||
</div> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="password">Пароль</Label> |
||||
<Input |
||||
id="password" |
||||
type="password" |
||||
autoComplete="current-password" |
||||
value={password} |
||||
onChange={(e) => setPassword(e.target.value)} |
||||
disabled={submitting} |
||||
/> |
||||
</div> |
||||
{error && <p className="text-sm text-destructive">{error}</p>} |
||||
<Button type="submit" className="w-full" disabled={submitting || !username.trim() || !password}> |
||||
{submitting ? <Loader2 size={16} className="animate-spin" /> : "Войти"} |
||||
</Button> |
||||
</form> |
||||
</CardContent> |
||||
</Card> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,240 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Card, CardContent } from "@/components/ui/card"; |
||||
import { Loader2, Sparkles, Plus, Send, Search, Trash2 } from "lucide-react"; |
||||
import { apiFetch, todayDate, API_BASE } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import Markdown from "@/components/Markdown"; |
||||
|
||||
interface Question { |
||||
id: number; |
||||
text: string; |
||||
answer: string | null; |
||||
date: string; |
||||
} |
||||
|
||||
export default function QuestionsPage() { |
||||
const { user } = useAuth(); |
||||
const canDeleteOwn = user?.role === "STUDENT"; |
||||
const [fields, setFields] = useState<string[]>([]); |
||||
const [saved, setSaved] = useState<Question[]>([]); |
||||
const [saving, setSaving] = useState(false); |
||||
const [answeringId, setAnsweringId] = useState<number | null>(null); |
||||
const [search, setSearch] = useState(""); |
||||
|
||||
useEffect(() => { |
||||
loadQuestions(); |
||||
}, []); |
||||
|
||||
async function loadQuestions() { |
||||
try { |
||||
const data = await apiFetch<Question[]>(`/questions?date=${todayDate()}`); |
||||
setSaved(data); |
||||
updateFieldCount(data.length); |
||||
} catch { |
||||
updateFieldCount(0); |
||||
} |
||||
} |
||||
|
||||
function updateFieldCount(savedCount: number) { |
||||
const needed = Math.max(1, 5 - savedCount); |
||||
setFields(Array(needed).fill("")); |
||||
} |
||||
|
||||
function updateField(index: number, value: string) { |
||||
setFields((prev) => { const c = [...prev]; c[index] = value; return c; }); |
||||
} |
||||
|
||||
async function saveQuestions() { |
||||
const nonEmpty = fields.filter((f) => f.trim()); |
||||
if (nonEmpty.length === 0) return; |
||||
|
||||
setSaving(true); |
||||
try { |
||||
const data = await apiFetch<Question[]>("/questions", { |
||||
method: "POST", body: JSON.stringify({ questions: nonEmpty }), |
||||
}); |
||||
const newSaved = [...saved, ...data]; |
||||
setSaved(newSaved); |
||||
updateFieldCount(newSaved.length); |
||||
} catch (err: any) { alert(err.message); } |
||||
setSaving(false); |
||||
} |
||||
|
||||
async function getAnswer(question: Question) { |
||||
if (question.answer || answeringId === question.id) return; |
||||
setAnsweringId(question.id); |
||||
try { |
||||
const res = await fetch(`${API_BASE}/questions/${question.id}/answer`, { |
||||
method: "POST", |
||||
credentials: "include", |
||||
}); |
||||
const reader = res.body?.getReader(); |
||||
const decoder = new TextDecoder(); |
||||
let fullAnswer = ""; |
||||
|
||||
while (reader) { |
||||
const { done, value } = await reader.read(); |
||||
if (done) break; |
||||
for (const line of decoder.decode(value).split("\n").filter((l) => l.startsWith("data: "))) { |
||||
const data = line.slice(6); |
||||
if (data === "[DONE]") break; |
||||
try { |
||||
const parsed = JSON.parse(data); |
||||
if (parsed.content) { |
||||
fullAnswer += parsed.content; |
||||
setSaved((prev) => prev.map((q) => q.id === question.id ? { ...q, answer: fullAnswer } : q)); |
||||
} |
||||
} catch { /* skip */ } |
||||
} |
||||
} |
||||
} catch (err: any) { alert(err.message); } |
||||
setAnsweringId(null); |
||||
} |
||||
|
||||
async function deleteQuestion(id: number) { |
||||
if (!canDeleteOwn || !confirm("Удалить этот вопрос безвозвратно?")) return; |
||||
try { |
||||
await apiFetch(`/questions/${id}`, { method: "DELETE" }); |
||||
const next = saved.filter((q) => q.id !== id); |
||||
setSaved(next); |
||||
updateFieldCount(next.length); |
||||
} catch (err: any) { |
||||
alert(err.message); |
||||
} |
||||
} |
||||
|
||||
const unanswered = saved.filter((q) => |
||||
!q.answer && (!search || q.text.toLowerCase().includes(search.toLowerCase())) |
||||
); |
||||
const answered = saved.filter((q) => |
||||
q.answer && (!search || q.text.toLowerCase().includes(search.toLowerCase()) || q.answer.toLowerCase().includes(search.toLowerCase())) |
||||
); |
||||
const todaySavedCount = saved.length; |
||||
const remaining = Math.max(0, 5 - todaySavedCount); |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Ежедневные вопросы</h1> |
||||
<p className="text-sm text-muted-foreground mt-1"> |
||||
{remaining > 0 |
||||
? `Ещё ${remaining} из 5 обязательных вопросов` |
||||
: `Норма выполнена (${todaySavedCount} вопросов)`} |
||||
</p> |
||||
</div> |
||||
|
||||
{/* New questions form */} |
||||
<Card> |
||||
<CardContent className="pt-5 space-y-3"> |
||||
{fields.map((val, i) => ( |
||||
<div key={i} className="animate-fade-in" style={{ animationDelay: `${i * 50}ms` }}> |
||||
<div className="flex items-center gap-2"> |
||||
<span className="text-xs font-medium text-muted-foreground w-4 text-right shrink-0"> |
||||
{todaySavedCount + i + 1} |
||||
</span> |
||||
<Input |
||||
value={val} |
||||
onChange={(e) => updateField(i, e.target.value)} |
||||
placeholder={`Вопрос...`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
))} |
||||
<div className="flex gap-2 pt-2 ml-6"> |
||||
<Button variant="outline" size="sm" onClick={() => setFields((p) => [...p, ""])}> |
||||
<Plus size={14} /> |
||||
Ещё |
||||
</Button> |
||||
<Button size="sm" onClick={saveQuestions} disabled={saving || fields.every((f) => !f.trim())}> |
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />} |
||||
Сохранить |
||||
</Button> |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
|
||||
{/* Search */} |
||||
{saved.length > 0 && ( |
||||
<div className="relative"> |
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" /> |
||||
<Input |
||||
value={search} |
||||
onChange={(e) => setSearch(e.target.value)} |
||||
placeholder="Поиск по вопросам..." |
||||
className="pl-9" |
||||
/> |
||||
</div> |
||||
)} |
||||
|
||||
{/* Unanswered first */} |
||||
{unanswered.length > 0 && ( |
||||
<div className="space-y-3"> |
||||
<h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider"> |
||||
Ожидают ответа ({unanswered.length}) |
||||
</h2> |
||||
{unanswered.map((q, i) => ( |
||||
<Card key={q.id} className="animate-fade-in border-orange-200/60" style={{ animationDelay: `${i * 40}ms` }}> |
||||
<CardContent className="pt-5 space-y-3"> |
||||
<p className="text-[14px] font-medium">{q.text}</p> |
||||
<div className="flex flex-wrap gap-2"> |
||||
<Button |
||||
variant="outline" |
||||
size="sm" |
||||
onClick={() => getAnswer(q)} |
||||
disabled={answeringId === q.id} |
||||
> |
||||
{answeringId === q.id ? ( |
||||
<> |
||||
<Sparkles size={13} className="animate-spin-glow" /> |
||||
Генерация... |
||||
</> |
||||
) : ( |
||||
<> |
||||
<Sparkles size={13} /> |
||||
Получить ответ |
||||
</> |
||||
)} |
||||
</Button> |
||||
{canDeleteOwn && ( |
||||
<Button variant="ghost" size="sm" className="text-destructive" onClick={() => deleteQuestion(q.id)}> |
||||
<Trash2 size={13} /> |
||||
Удалить |
||||
</Button> |
||||
)} |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
))} |
||||
</div> |
||||
)} |
||||
|
||||
{/* Answered below */} |
||||
{answered.length > 0 && ( |
||||
<div className="space-y-3"> |
||||
<h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider"> |
||||
С ответами ({answered.length}) |
||||
</h2> |
||||
{answered.map((q, i) => ( |
||||
<Card key={q.id} className="animate-fade-in" style={{ animationDelay: `${i * 40}ms` }}> |
||||
<CardContent className="pt-5 space-y-3"> |
||||
<div className="flex items-start justify-between gap-2"> |
||||
<p className="text-[14px] font-medium flex-1">{q.text}</p> |
||||
{canDeleteOwn && ( |
||||
<Button variant="ghost" size="icon" className="shrink-0 text-destructive h-8 w-8" onClick={() => deleteQuestion(q.id)} title="Удалить вопрос"> |
||||
<Trash2 size={14} /> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
<div className="bg-accent/50 rounded-xl p-4"> |
||||
<Markdown className="text-[13px]" exportable exportTitle={`question-${q.id}`}>{q.answer!}</Markdown> |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,196 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Card, CardContent } from "@/components/ui/card"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { API_BASE, apiFetch, todayDate } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import { Calendar, ImagePlus, Loader2, Trash2 } from "lucide-react"; |
||||
|
||||
interface HallPhoto { |
||||
id: number; |
||||
date: string; |
||||
createdAt: string; |
||||
imageUrl: string; |
||||
fileName: string; |
||||
displayName: string; |
||||
} |
||||
|
||||
export default function ReportPage() { |
||||
const { user } = useAuth(); |
||||
const canManagePhotos = |
||||
user?.username?.toLowerCase() === "konstantin"; |
||||
const fileInputRef = useRef<HTMLInputElement>(null); |
||||
const [photos, setPhotos] = useState<HallPhoto[]>([]); |
||||
const [selectedDate, setSelectedDate] = useState(todayDate()); |
||||
const [uploading, setUploading] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
loadPhotos(); |
||||
}, []); |
||||
|
||||
async function loadPhotos() { |
||||
try { |
||||
setPhotos(await apiFetch<HallPhoto[]>("/reports")); |
||||
} catch { |
||||
setPhotos([]); |
||||
} |
||||
} |
||||
|
||||
async function onFileChange(e: React.ChangeEvent<HTMLInputElement>) { |
||||
const file = e.target.files?.[0]; |
||||
if (!file) return; |
||||
const formData = new FormData(); |
||||
formData.append("photo", file); |
||||
formData.append("date", selectedDate); |
||||
|
||||
setUploading(true); |
||||
try { |
||||
const res = await fetch(`${API_BASE}/reports/upload`, { |
||||
method: "POST", |
||||
credentials: "include", |
||||
body: formData, |
||||
}); |
||||
if (!res.ok) { |
||||
const err = await res.json().catch(() => ({ error: "Ошибка загрузки" })); |
||||
throw new Error(err.error || `HTTP ${res.status}`); |
||||
} |
||||
await loadPhotos(); |
||||
} catch (err: any) { |
||||
alert(err.message); |
||||
} finally { |
||||
setUploading(false); |
||||
e.target.value = ""; |
||||
} |
||||
} |
||||
|
||||
async function deletePhoto(id: number) { |
||||
if (!confirm("Удалить это фото?")) return; |
||||
try { |
||||
await apiFetch(`/reports/${id}`, { method: "DELETE" }); |
||||
await loadPhotos(); |
||||
} catch (err: unknown) { |
||||
alert(err instanceof Error ? err.message : "Ошибка"); |
||||
} |
||||
} |
||||
|
||||
const grouped = useMemo(() => { |
||||
const g: Record<string, HallPhoto[]> = {}; |
||||
for (const p of photos) { |
||||
if (!g[p.date]) g[p.date] = []; |
||||
g[p.date].push(p); |
||||
} |
||||
return g; |
||||
}, [photos]); |
||||
|
||||
const sortedDates = Object.keys(grouped).sort((a, b) => b.localeCompare(a)); |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div className="flex items-center justify-between gap-2 flex-wrap"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Зал</h1> |
||||
<p className="text-sm text-muted-foreground mt-1"> |
||||
{canManagePhotos |
||||
? "Загружайте фото и просматривайте их по датам" |
||||
: "Просмотр фото ученика по датам"} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
|
||||
{canManagePhotos && ( |
||||
<Card> |
||||
<CardContent className="pt-5 flex flex-wrap items-end gap-3"> |
||||
<div className="space-y-1"> |
||||
<label className="text-xs text-muted-foreground">Дата</label> |
||||
<Input type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} /> |
||||
</div> |
||||
<div className="flex flex-col justify-end gap-0"> |
||||
<input |
||||
ref={fileInputRef} |
||||
type="file" |
||||
accept="image/*" |
||||
onChange={onFileChange} |
||||
disabled={uploading} |
||||
className="sr-only" |
||||
tabIndex={-1} |
||||
/> |
||||
<Button |
||||
type="button" |
||||
disabled={uploading} |
||||
onClick={() => fileInputRef.current?.click()} |
||||
> |
||||
{uploading ? <Loader2 size={15} className="animate-spin" /> : <ImagePlus size={15} />} |
||||
Прикрепить фото |
||||
</Button> |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
)} |
||||
|
||||
{sortedDates.map((date) => ( |
||||
<div key={date} className="space-y-3"> |
||||
<div className="flex items-center gap-2"> |
||||
<Calendar size={14} className="text-muted-foreground" /> |
||||
<h2 className="text-sm font-medium">{date}</h2> |
||||
<span className="text-xs text-muted-foreground">({grouped[date].length})</span> |
||||
</div> |
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3"> |
||||
{grouped[date].map((p) => { |
||||
const label = p.displayName || p.fileName; |
||||
return ( |
||||
<div |
||||
key={p.id} |
||||
className="relative group flex flex-col rounded-xl overflow-hidden border bg-accent/20 hover:shadow-sm transition" |
||||
> |
||||
<div className="relative"> |
||||
<button |
||||
type="button" |
||||
className="block w-full text-left" |
||||
onClick={() => window.open(p.imageUrl, "_blank", "noopener,noreferrer")} |
||||
> |
||||
<img |
||||
src={p.imageUrl} |
||||
alt={label} |
||||
loading="lazy" |
||||
className="w-full h-40 object-cover group-hover:scale-[1.02] transition" |
||||
/> |
||||
</button> |
||||
{canManagePhotos && ( |
||||
<Button |
||||
type="button" |
||||
variant="destructive" |
||||
size="icon" |
||||
className="absolute top-2 right-2 h-8 w-8 opacity-90 shadow-md" |
||||
onClick={(e) => { |
||||
e.stopPropagation(); |
||||
deletePhoto(p.id); |
||||
}} |
||||
title="Удалить" |
||||
> |
||||
<Trash2 size={14} /> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
<p |
||||
className="text-[11px] px-2 py-1.5 text-muted-foreground truncate border-t bg-background/95" |
||||
title={label} |
||||
> |
||||
{label} |
||||
</p> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
</div> |
||||
))} |
||||
|
||||
{photos.length === 0 && ( |
||||
<div className="text-center py-12 text-sm text-muted-foreground"> |
||||
{canManagePhotos |
||||
? "Пока нет фото. Добавьте первое изображение." |
||||
: "Пока нет фото."} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,147 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Textarea } from "@/components/ui/textarea"; |
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; |
||||
import { Label } from "@/components/ui/label"; |
||||
import { Save, Loader2, CheckCircle2, Key, MessageSquare } from "lucide-react"; |
||||
import { apiFetch } from "@/lib/utils"; |
||||
import { useAuth } from "@/context/AuthContext"; |
||||
import { Navigate } from "react-router-dom"; |
||||
|
||||
const PROMPT_FIELDS = [ |
||||
{ |
||||
key: "prompt_answer", |
||||
label: "Промпт для ответов на вопросы", |
||||
description: "Используется при нажатии «Получить ответ» в разделе вопросов", |
||||
placeholder: |
||||
"Ты — помощник-репетитор. Ответь на вопрос ученика максимально подробно и понятно...", |
||||
}, |
||||
{ |
||||
key: "prompt_textbook", |
||||
label: "Промпт для генерации учебника", |
||||
description: "Используется при генерации учебника по теме", |
||||
placeholder: |
||||
"Составь учебный материал по указанной теме. Объясняй просто, с примерами из жизни...", |
||||
}, |
||||
{ |
||||
key: "prompt_test", |
||||
label: "Промпт для генерации теста", |
||||
description: "Используется при создании теста из 10 вопросов", |
||||
placeholder: |
||||
"Сгенерируй тест из 10 вопросов с 4 вариантами ответа. Верни JSON-массив...", |
||||
}, |
||||
{ |
||||
key: "prompt_report", |
||||
label: "Промпт для ежедневного отчёта", |
||||
description: "Используется при генерации отчёта за день", |
||||
placeholder: |
||||
'Составь отчёт в формате: "Алексей Михайлович, добрый вечер, за сегодня я узнал..."', |
||||
}, |
||||
]; |
||||
|
||||
export default function SettingsPage() { |
||||
const { user } = useAuth(); |
||||
if (user?.role !== "TUTOR") { |
||||
return <Navigate to="/" replace />; |
||||
} |
||||
|
||||
const [apiKey, setApiKey] = useState(""); |
||||
const [prompts, setPrompts] = useState<Record<string, string>>({}); |
||||
const [saving, setSaving] = useState(false); |
||||
const [saved, setSaved] = useState(false); |
||||
|
||||
useEffect(() => { loadSettings(); }, []); |
||||
|
||||
async function loadSettings() { |
||||
try { |
||||
const data = await apiFetch<Record<string, string>>("/settings/raw"); |
||||
setApiKey(data.deepseek_api_key || ""); |
||||
const p: Record<string, string> = {}; |
||||
for (const f of PROMPT_FIELDS) p[f.key] = data[f.key] || ""; |
||||
setPrompts(p); |
||||
} catch { /* first time */ } |
||||
} |
||||
|
||||
async function saveSettings() { |
||||
setSaving(true); |
||||
setSaved(false); |
||||
const settings: Record<string, string> = { deepseek_api_key: apiKey }; |
||||
for (const [k, v] of Object.entries(prompts)) { |
||||
if (v.trim()) settings[k] = v.trim(); |
||||
} |
||||
try { |
||||
await apiFetch("/settings", { method: "PUT", body: JSON.stringify(settings) }); |
||||
setSaved(true); |
||||
setTimeout(() => setSaved(false), 3000); |
||||
} catch (err: any) { alert(err.message); } |
||||
setSaving(false); |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Настройки</h1> |
||||
<p className="text-sm text-muted-foreground mt-1">API-ключ и промпты для ИИ-ассистента</p> |
||||
</div> |
||||
|
||||
<Card> |
||||
<CardHeader className="pb-2"> |
||||
<CardTitle className="flex items-center gap-2 text-sm"> |
||||
<Key size={15} className="text-primary" /> |
||||
API-ключ DeepSeek |
||||
</CardTitle> |
||||
</CardHeader> |
||||
<CardContent className="space-y-2"> |
||||
<Input |
||||
type="password" |
||||
value={apiKey} |
||||
onChange={(e) => setApiKey(e.target.value)} |
||||
placeholder="sk-..." |
||||
/> |
||||
<p className="text-xs text-muted-foreground"> |
||||
Получите на{" "} |
||||
<a href="https://platform.deepseek.com" target="_blank" className="text-primary hover:underline"> |
||||
platform.deepseek.com |
||||
</a> |
||||
</p> |
||||
</CardContent> |
||||
</Card> |
||||
|
||||
<Card> |
||||
<CardHeader className="pb-2"> |
||||
<CardTitle className="flex items-center gap-2 text-sm"> |
||||
<MessageSquare size={15} className="text-primary" /> |
||||
Промпты |
||||
</CardTitle> |
||||
</CardHeader> |
||||
<CardContent className="space-y-5"> |
||||
{PROMPT_FIELDS.map((field) => ( |
||||
<div key={field.key} className="space-y-1.5"> |
||||
<Label htmlFor={field.key} className="text-[13px]">{field.label}</Label> |
||||
<p className="text-xs text-muted-foreground">{field.description}</p> |
||||
<Textarea |
||||
id={field.key} |
||||
value={prompts[field.key] || ""} |
||||
onChange={(e) => setPrompts((p) => ({ ...p, [field.key]: e.target.value }))} |
||||
placeholder={field.placeholder} |
||||
className="min-h-[90px] text-[13px]" |
||||
/> |
||||
</div> |
||||
))} |
||||
</CardContent> |
||||
</Card> |
||||
|
||||
<Button onClick={saveSettings} disabled={saving} className="w-full"> |
||||
{saving ? ( |
||||
<Loader2 size={15} className="animate-spin" /> |
||||
) : saved ? ( |
||||
<CheckCircle2 size={15} /> |
||||
) : ( |
||||
<Save size={15} /> |
||||
)} |
||||
{saved ? "Сохранено" : "Сохранить настройки"} |
||||
</Button> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,333 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Card, CardContent } from "@/components/ui/card"; |
||||
import { Loader2, ClipboardList, CheckCircle2, XCircle, RotateCcw, MessageSquare } from "lucide-react"; |
||||
import { apiFetch } from "@/lib/utils"; |
||||
|
||||
interface TestQuestion { |
||||
question: string; |
||||
options: Record<string, string>; |
||||
correct: string; |
||||
} |
||||
|
||||
interface Test { |
||||
id: number; |
||||
topic: string; |
||||
questions: string; |
||||
createdAt: string; |
||||
results: TestResult[]; |
||||
} |
||||
|
||||
interface TestResult { |
||||
id?: number; |
||||
score: number; |
||||
total: number; |
||||
/** false для наставника — результат не сохраняется в БД */ |
||||
persisted?: boolean; |
||||
} |
||||
|
||||
type Phase = "setup" | "generating" | "taking" | "results"; |
||||
|
||||
export default function TestPage() { |
||||
const [phase, setPhase] = useState<Phase>("setup"); |
||||
const [topic, setTopic] = useState(""); |
||||
const [fromQuestions, setFromQuestions] = useState(false); |
||||
const [testId, setTestId] = useState<number | null>(null); |
||||
const [questions, setQuestions] = useState<TestQuestion[]>([]); |
||||
const [answers, setAnswers] = useState<Record<string, string>>({}); |
||||
const [result, setResult] = useState<TestResult | null>(null); |
||||
const [tests, setTests] = useState<Test[]>([]); |
||||
const [currentQ, setCurrentQ] = useState(0); |
||||
|
||||
useEffect(() => { loadTests(); }, []); |
||||
|
||||
async function loadTests() { |
||||
try { setTests(await apiFetch<Test[]>("/tests")); } catch { /* empty */ } |
||||
} |
||||
|
||||
async function generateTest() { |
||||
setPhase("generating"); |
||||
try { |
||||
const body: Record<string, unknown> = fromQuestions |
||||
? { fromQuestions: true } |
||||
: { topic: topic.trim() }; |
||||
|
||||
if (!fromQuestions && !topic.trim()) { |
||||
alert("Введите тему"); |
||||
setPhase("setup"); |
||||
return; |
||||
} |
||||
|
||||
const test = await apiFetch<Test>("/tests/generate", { |
||||
method: "POST", body: JSON.stringify(body), |
||||
}); |
||||
|
||||
setTestId(test.id); |
||||
setQuestions(JSON.parse(test.questions)); |
||||
setAnswers({}); |
||||
setCurrentQ(0); |
||||
setPhase("taking"); |
||||
} catch (err: any) { alert(err.message); setPhase("setup"); } |
||||
} |
||||
|
||||
async function submitTest() { |
||||
if (!testId) return; |
||||
try { |
||||
const res = await apiFetch<TestResult>(`/tests/${testId}/submit`, { |
||||
method: "POST", body: JSON.stringify({ answers }), |
||||
}); |
||||
setResult(res); |
||||
setPhase("results"); |
||||
loadTests(); |
||||
} catch (err: any) { alert(err.message); } |
||||
} |
||||
|
||||
function reset() { |
||||
setPhase("setup"); |
||||
setTopic(""); |
||||
setFromQuestions(false); |
||||
setQuestions([]); |
||||
setAnswers({}); |
||||
setResult(null); |
||||
setTestId(null); |
||||
setCurrentQ(0); |
||||
} |
||||
|
||||
function retakeTest(test: Test) { |
||||
setTestId(test.id); |
||||
setQuestions(JSON.parse(test.questions)); |
||||
setAnswers({}); |
||||
setCurrentQ(0); |
||||
setResult(null); |
||||
setPhase("taking"); |
||||
} |
||||
|
||||
if (phase === "generating") { |
||||
return ( |
||||
<div className="flex flex-col items-center justify-center py-24 gap-4 animate-fade-in"> |
||||
<div className="w-12 h-12 rounded-2xl bg-accent flex items-center justify-center animate-pulse-glow"> |
||||
<Loader2 size={22} className="animate-spin text-primary" /> |
||||
</div> |
||||
<p className="text-sm text-muted-foreground">Генерируем тест из 10 вопросов...</p> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
if (phase === "taking") { |
||||
const q = questions[currentQ]; |
||||
const progress = Object.keys(answers).length; |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div className="flex items-center justify-between"> |
||||
<h1 className="text-xl font-semibold tracking-tight"> |
||||
Вопрос {currentQ + 1} из {questions.length} |
||||
</h1> |
||||
<span className="text-sm text-muted-foreground"> |
||||
Отвечено: {progress}/{questions.length} |
||||
</span> |
||||
</div> |
||||
|
||||
<div className="w-full bg-muted rounded-full h-1.5 overflow-hidden"> |
||||
<div |
||||
className="bg-primary h-full rounded-full transition-all duration-500 ease-out" |
||||
style={{ width: `${(progress / questions.length) * 100}%` }} |
||||
/> |
||||
</div> |
||||
|
||||
<Card className="animate-fade-in" key={currentQ}> |
||||
<CardContent className="pt-5 space-y-4"> |
||||
<p className="text-[15px] font-medium leading-relaxed">{q.question}</p> |
||||
<div className="space-y-2"> |
||||
{Object.entries(q.options).map(([key, text]) => ( |
||||
<button |
||||
key={key} |
||||
onClick={() => setAnswers((p) => ({ ...p, [q.question]: key }))} |
||||
className={`w-full text-left p-3.5 rounded-xl border transition-all duration-200 cursor-pointer text-sm ${ |
||||
answers[q.question] === key |
||||
? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/20" |
||||
: "hover:bg-secondary/80 hover:border-primary/20" |
||||
}`}
|
||||
> |
||||
<span className="font-medium mr-2 opacity-60">{key.toUpperCase()}</span> |
||||
{text} |
||||
</button> |
||||
))} |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
|
||||
<div className="flex justify-between"> |
||||
<Button |
||||
variant="outline" |
||||
onClick={() => setCurrentQ((c) => Math.max(0, c - 1))} |
||||
disabled={currentQ === 0} |
||||
> |
||||
Назад |
||||
</Button> |
||||
<div className="flex gap-2"> |
||||
{currentQ < questions.length - 1 ? ( |
||||
<Button onClick={() => setCurrentQ((c) => c + 1)}> |
||||
Далее |
||||
</Button> |
||||
) : ( |
||||
<Button |
||||
onClick={submitTest} |
||||
disabled={progress < questions.length} |
||||
> |
||||
Завершить тест |
||||
</Button> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
if (phase === "results" && result) { |
||||
const pct = Math.round((result.score / result.total) * 100); |
||||
const isGood = pct >= 70; |
||||
|
||||
return ( |
||||
<div className="space-y-6 animate-fade-in"> |
||||
<Card className={isGood ? "border-green-200" : "border-orange-200"}> |
||||
<CardContent className="pt-6 text-center space-y-4"> |
||||
<div className={`text-5xl font-bold ${isGood ? "text-green-600" : "text-orange-500"}`}> |
||||
{result.score}/{result.total} |
||||
</div> |
||||
<p className="text-muted-foreground"> |
||||
{pct >= 90 ? "Превосходно!" : pct >= 70 ? "Хороший результат" : pct >= 50 ? "Неплохо, но стоит повторить" : "Нужно подтянуть материал"} |
||||
</p> |
||||
<div className="w-full bg-muted rounded-full h-2 overflow-hidden max-w-xs mx-auto"> |
||||
<div |
||||
className={`h-full rounded-full transition-all duration-1000 ease-out ${isGood ? "bg-green-500" : "bg-orange-400"}`} |
||||
style={{ width: `${pct}%` }} |
||||
/> |
||||
</div> |
||||
</CardContent> |
||||
</Card> |
||||
|
||||
<div className="space-y-2"> |
||||
{questions.map((q, i) => { |
||||
const userAnswer = answers[q.question]; |
||||
const isCorrect = userAnswer === q.correct; |
||||
return ( |
||||
<div |
||||
key={i} |
||||
className={`flex items-start gap-3 p-3.5 rounded-xl border text-sm animate-fade-in ${ |
||||
isCorrect ? "border-green-200 bg-green-50/50" : "border-red-200 bg-red-50/50" |
||||
}`}
|
||||
style={{ animationDelay: `${i * 50}ms` }} |
||||
> |
||||
{isCorrect |
||||
? <CheckCircle2 size={17} className="text-green-600 mt-0.5 shrink-0" /> |
||||
: <XCircle size={17} className="text-red-500 mt-0.5 shrink-0" />} |
||||
<div> |
||||
<p className="font-medium">{q.question}</p> |
||||
{!isCorrect && ( |
||||
<p className="text-xs text-muted-foreground mt-1"> |
||||
Правильно: {q.correct}) {q.options[q.correct]} |
||||
</p> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
|
||||
<Button onClick={reset} variant="outline" className="w-full"> |
||||
<RotateCcw size={15} /> |
||||
Новый тест |
||||
</Button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Тестирование</h1> |
||||
<p className="text-sm text-muted-foreground mt-1">Проверьте знания — 10 вопросов с вариантами ответов</p> |
||||
</div> |
||||
|
||||
<div className="grid grid-cols-2 gap-3"> |
||||
<button |
||||
onClick={() => setFromQuestions(false)} |
||||
className={`p-5 rounded-2xl border text-center transition-all duration-200 cursor-pointer ${ |
||||
!fromQuestions |
||||
? "bg-accent border-primary/20 shadow-sm shadow-primary/5" |
||||
: "hover:bg-secondary/60" |
||||
}`}
|
||||
> |
||||
<ClipboardList size={22} className={`mx-auto mb-2 ${!fromQuestions ? "text-primary" : "text-muted-foreground"}`} /> |
||||
<span className="text-sm font-medium block">По теме</span> |
||||
<span className="text-xs text-muted-foreground">Укажите тему теста</span> |
||||
</button> |
||||
<button |
||||
onClick={() => setFromQuestions(true)} |
||||
className={`p-5 rounded-2xl border text-center transition-all duration-200 cursor-pointer ${ |
||||
fromQuestions |
||||
? "bg-accent border-primary/20 shadow-sm shadow-primary/5" |
||||
: "hover:bg-secondary/60" |
||||
}`}
|
||||
> |
||||
<MessageSquare size={22} className={`mx-auto mb-2 ${fromQuestions ? "text-primary" : "text-muted-foreground"}`} /> |
||||
<span className="text-sm font-medium block">По моим вопросам</span> |
||||
<span className="text-xs text-muted-foreground">На основе заданных ранее</span> |
||||
</button> |
||||
</div> |
||||
|
||||
{!fromQuestions && ( |
||||
<Input |
||||
value={topic} |
||||
onChange={(e) => setTopic(e.target.value)} |
||||
placeholder="Тема теста..." |
||||
className="animate-fade-in" |
||||
/> |
||||
)} |
||||
|
||||
<Button onClick={generateTest} className="w-full"> |
||||
Сгенерировать тест |
||||
</Button> |
||||
|
||||
{tests.length > 0 && ( |
||||
<div className="space-y-2"> |
||||
<h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wider"> |
||||
История |
||||
</h2> |
||||
{tests.map((t) => ( |
||||
<div key={t.id} className="flex items-center justify-between p-3.5 rounded-xl border text-sm"> |
||||
<div> |
||||
<span className="font-medium">{t.topic}</span> |
||||
<span className="text-xs text-muted-foreground ml-2"> |
||||
{new Date(t.createdAt).toLocaleDateString("ru")} |
||||
</span> |
||||
{t.results.length > 0 && ( |
||||
<span className={`ml-2 text-sm font-semibold ${ |
||||
t.results[t.results.length - 1].score / t.results[t.results.length - 1].total >= 0.7 ? "text-green-600" : "text-orange-500" |
||||
}`}>
|
||||
{t.results[t.results.length - 1].score}/{t.results[t.results.length - 1].total} |
||||
</span> |
||||
)} |
||||
{t.results.length > 1 && ( |
||||
<span className="text-[10px] text-muted-foreground ml-1"> |
||||
({t.results.length} попыток) |
||||
</span> |
||||
)} |
||||
</div> |
||||
<Button |
||||
variant="outline" |
||||
size="sm" |
||||
onClick={() => retakeTest(t)} |
||||
> |
||||
<RotateCcw size={13} /> |
||||
Пройти |
||||
</Button> |
||||
</div> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,162 @@
|
||||
import { useState, useEffect } from "react"; |
||||
import { Button } from "@/components/ui/button"; |
||||
import { Input } from "@/components/ui/input"; |
||||
import { Card, CardContent } from "@/components/ui/card"; |
||||
import { BookOpen, ChevronRight, Search, Sparkles } from "lucide-react"; |
||||
import { apiFetch, API_BASE } from "@/lib/utils"; |
||||
import Markdown from "@/components/Markdown"; |
||||
|
||||
interface Textbook { |
||||
id: number; |
||||
topic: string; |
||||
content: string; |
||||
createdAt: string; |
||||
} |
||||
|
||||
export default function TextbookPage() { |
||||
const [topic, setTopic] = useState(""); |
||||
const [generating, setGenerating] = useState(false); |
||||
const [current, setCurrent] = useState(""); |
||||
const [textbooks, setTextbooks] = useState<Textbook[]>([]); |
||||
const [selectedId, setSelectedId] = useState<number | null>(null); |
||||
const [search, setSearch] = useState(""); |
||||
|
||||
useEffect(() => { loadTextbooks(); }, []); |
||||
|
||||
async function loadTextbooks() { |
||||
try { setTextbooks(await apiFetch<Textbook[]>("/textbooks")); } catch {} |
||||
} |
||||
|
||||
async function generate() { |
||||
if (!topic.trim() || generating) return; |
||||
setGenerating(true); |
||||
setCurrent(""); |
||||
setSelectedId(null); |
||||
|
||||
try { |
||||
const res = await fetch(`${API_BASE}/textbooks/generate`, { |
||||
method: "POST", |
||||
credentials: "include", |
||||
headers: { "Content-Type": "application/json" }, |
||||
body: JSON.stringify({ topic: topic.trim() }), |
||||
}); |
||||
|
||||
const reader = res.body?.getReader(); |
||||
const decoder = new TextDecoder(); |
||||
let fullContent = ""; |
||||
|
||||
while (reader) { |
||||
const { done, value } = await reader.read(); |
||||
if (done) break; |
||||
for (const line of decoder.decode(value).split("\n").filter((l) => l.startsWith("data: "))) { |
||||
const data = line.slice(6); |
||||
if (data === "[DONE]") break; |
||||
try { |
||||
const parsed = JSON.parse(data); |
||||
if (parsed.content) { fullContent += parsed.content; setCurrent(fullContent); } |
||||
} catch {} |
||||
} |
||||
} |
||||
|
||||
setTopic(""); |
||||
loadTextbooks(); |
||||
} catch (err: any) { setCurrent(`Ошибка: ${err.message}`); } |
||||
setGenerating(false); |
||||
} |
||||
|
||||
const displayContent = selectedId |
||||
? textbooks.find((t) => t.id === selectedId)?.content || "" |
||||
: current; |
||||
|
||||
const filtered = textbooks.filter( |
||||
(t) => t.topic.toLowerCase().includes(search.toLowerCase()) |
||||
); |
||||
|
||||
return ( |
||||
<div className="space-y-6"> |
||||
<div> |
||||
<h1 className="text-xl font-semibold tracking-tight">Генерация учебника</h1> |
||||
<p className="text-sm text-muted-foreground mt-1"> |
||||
ИИ составит учебник с понятными объяснениями по вашей теме |
||||
</p> |
||||
</div> |
||||
|
||||
<div className="flex gap-2"> |
||||
<Input |
||||
value={topic} |
||||
onChange={(e) => setTopic(e.target.value)} |
||||
onKeyDown={(e) => e.key === "Enter" && generate()} |
||||
placeholder="Введите тему..." |
||||
disabled={generating} |
||||
className="flex-1" |
||||
/> |
||||
<Button onClick={generate} disabled={generating || !topic.trim()}> |
||||
{generating ? <Sparkles size={16} className="animate-spin-glow" /> : <BookOpen size={16} />} |
||||
Создать |
||||
</Button> |
||||
</div> |
||||
|
||||
{generating && !displayContent && ( |
||||
<div className="shimmer rounded-2xl h-40" /> |
||||
)} |
||||
|
||||
{displayContent && ( |
||||
<Card className="animate-fade-in"> |
||||
<CardContent className="pt-5"> |
||||
<Markdown exportable exportTitle={selectedId ? textbooks.find((t) => t.id === selectedId)?.topic || "textbook" : topic || "textbook"}> |
||||
{displayContent} |
||||
</Markdown> |
||||
</CardContent> |
||||
</Card> |
||||
)} |
||||
|
||||
{textbooks.length > 0 && ( |
||||
<div className="space-y-3"> |
||||
<h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wider"> |
||||
Созданные учебники |
||||
</h2> |
||||
|
||||
<div className="relative"> |
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" /> |
||||
<Input |
||||
value={search} |
||||
onChange={(e) => setSearch(e.target.value)} |
||||
placeholder="Поиск по учебникам..." |
||||
className="pl-9" |
||||
/> |
||||
</div> |
||||
|
||||
<div className="space-y-1.5"> |
||||
{filtered.map((tb) => ( |
||||
<button |
||||
key={tb.id} |
||||
onClick={() => setSelectedId(tb.id === selectedId ? null : tb.id)} |
||||
className={`w-full text-left flex items-center justify-between p-3.5 rounded-xl border transition-all duration-200 cursor-pointer group ${ |
||||
tb.id === selectedId |
||||
? "bg-accent border-primary/20 shadow-sm" |
||||
: "hover:bg-secondary/60 hover:border-border" |
||||
}`}
|
||||
> |
||||
<div> |
||||
<span className="text-sm font-medium">{tb.topic}</span> |
||||
<span className="text-xs text-muted-foreground ml-2"> |
||||
{new Date(tb.createdAt).toLocaleDateString("ru")} |
||||
</span> |
||||
</div> |
||||
<ChevronRight |
||||
size={15} |
||||
className={`text-muted-foreground transition-transform duration-200 ${ |
||||
tb.id === selectedId ? "rotate-90" : "group-hover:translate-x-0.5" |
||||
}`}
|
||||
/> |
||||
</button> |
||||
))} |
||||
{filtered.length === 0 && search && ( |
||||
<p className="text-center text-sm text-muted-foreground py-6">Ничего не найдено</p> |
||||
)} |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,32 @@
|
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
"target": "ES2023", |
||||
"useDefineForClassFields": true, |
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"], |
||||
"module": "ESNext", |
||||
"types": ["vite/client"], |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"verbatimModuleSyntax": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
"jsx": "react-jsx", |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"erasableSyntaxOnly": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true, |
||||
"baseUrl": ".", |
||||
"paths": { |
||||
"@/*": ["./src/*"] |
||||
} |
||||
}, |
||||
"include": ["src"] |
||||
} |
||||
@ -0,0 +1,7 @@
|
||||
{ |
||||
"files": [], |
||||
"references": [ |
||||
{ "path": "./tsconfig.app.json" }, |
||||
{ "path": "./tsconfig.node.json" } |
||||
] |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
||||
"target": "ES2023", |
||||
"lib": ["ES2023"], |
||||
"module": "ESNext", |
||||
"types": ["node"], |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"verbatimModuleSyntax": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"erasableSyntaxOnly": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true |
||||
}, |
||||
"include": ["vite.config.ts"] |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
import { defineConfig } from "vite"; |
||||
import react from "@vitejs/plugin-react"; |
||||
import tailwindcss from "@tailwindcss/vite"; |
||||
import path from "path"; |
||||
|
||||
export default defineConfig({ |
||||
plugins: [react(), tailwindcss()], |
||||
resolve: { |
||||
alias: { |
||||
"@": path.resolve(__dirname, "./src"), |
||||
}, |
||||
}, |
||||
server: { |
||||
port: 5173, |
||||
proxy: { |
||||
"/api": { |
||||
target: "http://localhost:3001", |
||||
changeOrigin: true, |
||||
}, |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,17 @@
|
||||
{ |
||||
"name": "edu_helper", |
||||
"version": "1.0.0", |
||||
"description": "EduHelper — ИИ-помощник для обучения", |
||||
"scripts": { |
||||
"dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm run dev\"", |
||||
"app": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm run dev\" \"sleep 3 && open -a 'Google Chrome' --args --app=http://localhost:5173 --new-window\"", |
||||
"app:arc": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm run dev\" \"sleep 3 && open http://localhost:5173\"" |
||||
}, |
||||
"keywords": [], |
||||
"author": "", |
||||
"license": "ISC", |
||||
"type": "commonjs", |
||||
"devDependencies": { |
||||
"concurrently": "^9.2.1" |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@
|
||||
нужно сделать веб приложение |
||||
обязательно использование Shadcn UI |
||||
как минимум 5 полей для вопросов - обязательно должны быть заполнены в течение дня |
||||
ии ассистент должен отвечать на вопросы по кнопке |
||||
нужно хранить вопросы и ответы |
||||
возможность составить учебник с максимально понятными объяснениями для тупого (без шуток) через ИИ ассиситента по теме которую пользователь вводит |
||||
составление теста по 10 вопросам по заданной теме либо по вопросам которые задавал пользователь ранее |
||||
дизайн в два цвета где один из них белый |
||||
генерация отчёта ежедневно в формате |
||||
"Алексей Михайлович, добрый вечер, за сегодня я узнал {формулировка от llm по вопросам за день}. Прошёл тест из _ вопросов по теме _ на _ баллов из _, составил учебник по теме _." |
||||
ИИ ассиситент - дипсик, вставить ключ можно в интерфейсе |
||||
Надпись на главной странице "Доброе утро/день/вечер, Константин" и чат с ИИ ассистентом без системного промпта |
||||
раздел настроек обязаетльно, в котором можно редактировать все промпты для каждой потребности |
||||
|
||||
Loading…
Reference in new issue