feat: align UI with T-Bank design system, redesign landing page with bento layout, migrate shared utilities from SparkGuardian, standardize status chips and date formatters, remove explicit date inputs, and add project README
This commit is contained in:
Микаэл Оганесян
111
README.md
111
README.md
@@ -1,59 +1,98 @@
|
||||
# SparkAntiplagiat
|
||||
# SparkGuardian Antiplagiat Frontend
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.7.
|
||||
Клиентское веб-приложение для управления процессами алгоритмической проверки академических работ на заимствования, работающее поверх REST API системы SparkGuardian Antiplagiat.
|
||||
|
||||
## Development server
|
||||
A premium single-page web client for managing algorithmic plagiarism checks, handling ZIP course uploads, and reviewing source code overlaps, built on top of the SparkGuardian Antiplagiat REST API.
|
||||
|
||||
To start a local development server, run:
|
||||
---
|
||||
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
## О проекте
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
Приложение предназначено для преподавателей, ассистентов и администраторов учебного процесса. Оно позволяет прозрачно и эффективно анализировать сдачу программного кода студентами с применением методов лексической токенизации и алгоритма шинглов (Shingling & Jaccard). Фронтенд построен в соответствии со строгими стандартами **T-Bank Design System**, полностью адаптивен и предоставляет мощные встроенные инструменты для конфигурации правил анализа.
|
||||
|
||||
## Code scaffolding
|
||||
### Ключевые возможности
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
* **Landing Page**: Современная маркетинговая страница с метриками системы и процессом выполнения проверок (pipeline).
|
||||
* **Управление мероприятиями и группами**: Полный CRUD для удобного распределения курсовых и потоков, чтобы исключить пересечения проверок между разными годами.
|
||||
* **Загрузка ZIP-архивов**: Массовое добавление работ (Works) — система на лету распаковывает архивы и распределяет их по студентам выбранной группы.
|
||||
* **Reference Sets (Эталоны)**: Управление коллекциями шаблонного исходного кода, позволяющими игнорировать заготовки и базовые классы при расчете плагиата.
|
||||
* **Анализ заимствований (Analysis Runs)**: Запуск фоновых задач проверки совпадений, использующих построение AST и N-граммы, благодаря чему переименование переменных не скрывает факт списывания.
|
||||
* **Выгрузка отчетов**: Мгновенная генерация сводных деталей совпадений в PDF, HTML, и JSON форматах с тепловыми картами заимствований (heatmap overlaps).
|
||||
* **Встроенная Dev-Console**: Полноценная in-app консоль разработчика для перехвата API-запросов (`dev-log.interceptor`) прямо в интерфейсе браузера, без открытия Network Tab.
|
||||
* **Мониторинг инфраструктуры**: Доступ к таблице журнала телеметрии и аудита для отслеживания загруженности серверов.
|
||||
* **Уведомления**: Интеллектуальная классификация HTTP-ошибок (Network/Timeout/Parse) с человекочитаемыми сообщениями.
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
### Технологический стек
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
| Область | Выбор |
|
||||
|--------|--------|
|
||||
| Фреймворк | Angular 21 (Signals, OnPush, Standalone) |
|
||||
| Язык | TypeScript (strict-mode) |
|
||||
| UI & Дизайн | Taiga UI v5, кастомные токены T-Bank CSS (`color-tokens.css`) |
|
||||
| Взаимодействие | `HttpClient`, RXJS, Interceptors |
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
### Архитектурные особенности
|
||||
|
||||
## Building
|
||||
* **Слоевая структура**: Строгое деление на `core` (синглтоны, DI-токены, интерсепторы), `features` (lazy-loaded самостоятельные компоненты) и `shared` (чистые pure-функции и date-time утилиты).
|
||||
* **Производительность**: Использование `ChangeDetectionStrategy.OnPush` повсеместно. Lazy-loading вкладок (`@defer`).
|
||||
|
||||
To build the project run:
|
||||
### Локальная настройка и конфигурация
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
1. Скопируйте `.env.example` в `.env` и настройте значения (например, `SG_API_BASE_PATH`, `SG_API_FALLBACK_ORIGIN`).
|
||||
2. Выполните: `npm install` (или `make install`).
|
||||
3. Синхронизируйте переменные (вызывается авто-hooks): `npm run env:sync`. Создает `environment.ts`.
|
||||
4. Запуск dev-сервера с прокси: `npm start` (по умолчанию `http://localhost:4200/`).
|
||||
|
||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||
Актуальный OpenAPI контракт системы доступен в `docs/antiplagiat_api.json`.
|
||||
|
||||
## Running unit tests
|
||||
---
|
||||
|
||||
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
|
||||
## About the project
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
The app is aimed at professors, teaching assistants, and administrators. It provides a robust framework to transparently manage the submission and peer-review of source code using tokenization and shingling (Shingling & Jaccard index). The frontend strictly adheres to the **T-Bank Design System**, ensuring a premium, responsive, and robust user experience.
|
||||
|
||||
## Running end-to-end tests
|
||||
### Core Features
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
* **Landing Page**: A modern entrance showcasing system metrics and technical capabilities (Bento block layout).
|
||||
* **Event & Group Management**: Complete CRUD for grouping courses and isolated assignments.
|
||||
* **ZIP Batch Uploads**: Frictionless batch adding of student assignments directly via ZIP package uploads.
|
||||
* **Reference Sets**: Ignore template code or boilerplate when finding codebase matches.
|
||||
* **Analysis Runs**: Dispatching background tasks verifying structural overlaps, effectively matching similarities despite variable renaming or function shuffles.
|
||||
* **Formatted Reports**: Export matched outputs into highly readable PDF, HTML, or raw JSON deliverables.
|
||||
* **Built-in Dev-Console**: An integrated developer console overlay trapping all API requests and responses directly in the browser window.
|
||||
* **Infrastructure Telemetry**: Direct access to event auditing and system stability metrics.
|
||||
* **Smart Error Handling**: Intelligent HTTP error classification with user-friendly Russian/English notifications.
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
### Tech Stack
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
| Area | Choice |
|
||||
|------|--------|
|
||||
| Framework | Angular 21 (Signals, OnPush, Standalone components) |
|
||||
| Language | TypeScript (strict-mode) |
|
||||
| UI & Design | Taiga UI v5, custom T-Bank CSS variables (`color-tokens.css`) |
|
||||
| Data | `HttpClient`, RXJS, specialized interceptors |
|
||||
|
||||
## Additional Resources
|
||||
### Architecture
|
||||
The project strictly isolates modules into `core` (services, tokens, interceptors), `features` (routing, smart components), and `shared` (pure utilities). All components use `OnPush` change detection and Angular 21's `@defer` blocks to achieve peak rendering performance across massive administrative data tables.
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
### Running Local Environment
|
||||
|
||||
1. Copy `.env.example` to `.env` and set endpoints (`SG_API_BASE_PATH`, `SG_API_FALLBACK_ORIGIN`).
|
||||
2. Install packages: `npm install` (or `make install`).
|
||||
3. Sync environment (done automatically on hooks): `npm run env:sync`.
|
||||
4. Run proxy dev-server: `npm start` (usually at `http://localhost:4200/`).
|
||||
|
||||
Refer to `docs/antiplagiat_api.json` for the most recent REST Open API specification.
|
||||
|
||||
---
|
||||
|
||||
### Command Reference
|
||||
|
||||
| Task | Command |
|
||||
|------|---------|
|
||||
| Dev server with proxy | `npm start` or `make start` |
|
||||
| Production build | `npm run build` or `make build` |
|
||||
| Development build | `make build-dev` |
|
||||
| Unit tests | `npm test` |
|
||||
| Lint | `npm run lint` |
|
||||
| Clean artifacts | `make clean` |
|
||||
|
||||
Reference in New Issue
Block a user