Session 2: architecture decisions from tfflaskcrud + design study

2026-07-23 09:23:20 +04:00
parent 1dd04dff3f
commit 6e5f009b82
1 changed files with 86 additions and 0 deletions
@@ -0,0 +1,86 @@
+# Сессия 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-иконки