87 lines
4.8 KiB
Markdown
87 lines
4.8 KiB
Markdown
# Сессия 2026-07-23 — архитектурные решения для app-autotest
|
||
|
||
## Изучены эталонные проекты
|
||
|
||
### 1. `/home/naeel/tf_provider/tfflaskcrud` — эталон Flask-приложения для Nubes
|
||
|
||
**Структура (минималистичная):**
|
||
```
|
||
site/
|
||
├── app.py # ~100 строк — весь backend в одном файле
|
||
├── static/
|
||
│ ├── favicon.svg # SVG-фавикон Nubes
|
||
│ ├── logo.svg # Логотип Nubes
|
||
│ └── style.css # Все стили в одном файле, CSS Custom Properties
|
||
└── templates/
|
||
└── index.html # Единственный шаблон — вся страница в одном файле
|
||
```
|
||
|
||
**Ключевые паттерны:**
|
||
- Вся логика в одном `app.py` (монолит, без blueprints)
|
||
- Один роут `"/"` с GET+POST, вся логика — в `index()`
|
||
- POST-redirect-GET (никакого AJAX)
|
||
- Никаких ORM — сырой SQL через `psycopg2` с параметризацией
|
||
- Конфигурация только через переменные окружения (12-factor)
|
||
- `VERSION` в коде, отображается в футере
|
||
- No-JS (кроме `onclick="return confirm(...)"` для удаления)
|
||
- Русский `<html lang="ru">`
|
||
|
||
**Зависимости:** `Flask>=3.0`, `psycopg2-binary>=2.9`, `gunicorn>=21.2`
|
||
|
||
### 2. `/home/naeel/nubes/design` — дизайн-система Nubes
|
||
|
||
**Цвета:**
|
||
| Переменная | HEX | Роль |
|
||
|---|---|---|
|
||
| `--brand-primary` | `#2563eb` | Основной синий |
|
||
| `--brand-primary-dark` | `#1d4ed8` | Hover |
|
||
| `--brand-gray` | `#d1d5db` | Границы |
|
||
| `--brand-grey-light` | `#f3f4f6` | Фон заголовков |
|
||
| `--destructive` | `#ef4444` | Удаление/ошибка |
|
||
| `--green` | `#22c55e` | Успех |
|
||
|
||
**Типографика:**
|
||
- Шрифт: `system-ui` (системный стек)
|
||
- Базовый размер: `14px`
|
||
- Заголовки: `16px`, `font-weight: 600`
|
||
|
||
**Компоненты:**
|
||
- Карточки: `border-radius: 12px`, `border: 1px solid --brand-gray`, тень
|
||
- Кнопки: `height: 32px`, `border-radius: 6px`, `padding: 0 14px`, Lucide-иконки
|
||
- Таблицы: `th` — серый фон + uppercase, `td` — границы, hover на строках
|
||
- Формы: лейбл `text-sm`, инпут `h-9 rounded-md border`
|
||
- Модальные окна: оверлей + `border-radius: 12px` + тень
|
||
|
||
**Иконки:** Lucide (CDN: `unpkg.com/lucide@latest`)
|
||
|
||
**CSS:** CSS Custom Properties, без препроцессоров, без Tailwind/Bootstrap, стили в `<style>` теге в шапке HTML
|
||
|
||
**JS-архитектура (из contracts-flask):**
|
||
- Паттерн: `action → мутация state → render(state)` — однонаправленный поток
|
||
- `state` — единый источник истины, `console.log(state)` показывает всё
|
||
|
||
## План воплощения app-autotest
|
||
|
||
### Структура проекта (по образу tfflaskcrud)
|
||
```
|
||
app-autotest/
|
||
├── requirements.txt # Flask, psycopg2, gunicorn, requests, PyYAML
|
||
├── site/
|
||
│ ├── app.py # Точка входа (монолит)
|
||
│ ├── api.py # Клиент к API облака (обёртка над requests)
|
||
│ ├── models.py # Работа с БД (инстансы, тесты, конфигурация)
|
||
│ ├── static/
|
||
│ │ ├── favicon.svg # Nubes favicon
|
||
│ │ ├── logo.svg # Nubes logo
|
||
│ │ └── style.css # Стили в дизайне Nubes
|
||
│ └── templates/
|
||
│ └── index.html # Главная страница: список тестов + конфигурация
|
||
```
|
||
|
||
### Что пойдёт своим путём (отличия от tfflaskcrud)
|
||
- **Множественные роуты** — не только `"/"`, нужны API-роуты для запуска тестов, статуса, конфигурации
|
||
- **JavaScript на фронте** — для поллинга статуса тестов, асинхронных запросов к бэкенду (паттерн: `state → render`)
|
||
- **Модальные окна** — для конфигурации теста (выбор сервиса, операций, параметров)
|
||
- **Pipeline stepper** — визуально как в contracts: ○ Получение параметров → ○ Запуск → ○ Ожидание → ✓ Готово
|
||
- **Дизайн Nubes** — карточки, кнопки, таблицы, модалки, Lucide-иконки
|