fix: Restore all files lost during destructive rebase
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
232
backend/frontend/components/README.md
Normal file
232
backend/frontend/components/README.md
Normal file
@@ -0,0 +1,232 @@
|
||||
# BreakPilot Studio - Komponenten-Refactoring
|
||||
|
||||
## Überblick
|
||||
|
||||
Die monolithische `studio.py` (11.703 Zeilen) wurde erfolgreich in 7 modulare Komponenten aufgeteilt:
|
||||
|
||||
| Komponente | Zeilen | Beschreibung |
|
||||
|------------|--------|--------------|
|
||||
| `base.py` | ~300 | CSS Variables, Base Styles, Theme Toggle |
|
||||
| `legal_modal.py` | ~1.200 | Legal/Consent Modal (AGB, Datenschutz, Cookies, etc.) |
|
||||
| `auth_modal.py` | ~1.500 | Auth/Login/Register Modal, 2FA |
|
||||
| `admin_panel.py` | ~3.000 | Admin Panel (Documents, Versions, Approval) |
|
||||
| `admin_email.py` | ~1.000 | E-Mail Template Management |
|
||||
| `admin_dsms.py` | ~1.500 | DSMS/IPFS WebUI, Archive Management |
|
||||
| `admin_stats.py` | ~700 | Statistics & GDPR Export |
|
||||
|
||||
**Gesamt:** ~9.200 Zeilen in Komponenten (78% der ursprünglichen Datei)
|
||||
|
||||
## Struktur
|
||||
|
||||
```
|
||||
backend/frontend/
|
||||
├── studio.py (ursprünglich 11.703 Zeilen)
|
||||
├── studio.py.backup (Backup der Original-Datei)
|
||||
├── studio_refactored_demo.py (Demo der Integration)
|
||||
└── components/
|
||||
├── __init__.py
|
||||
├── base.py
|
||||
├── legal_modal.py
|
||||
├── auth_modal.py
|
||||
├── admin_panel.py
|
||||
├── admin_email.py
|
||||
├── admin_dsms.py
|
||||
└── admin_stats.py
|
||||
```
|
||||
|
||||
## Komponenten-API
|
||||
|
||||
Jede Komponente exportiert 3 Funktionen:
|
||||
|
||||
```python
|
||||
def get_[component]_css() -> str:
|
||||
"""Gibt das CSS für die Komponente zurück"""
|
||||
|
||||
def get_[component]_html() -> str:
|
||||
"""Gibt das HTML für die Komponente zurück"""
|
||||
|
||||
def get_[component]_js() -> str:
|
||||
"""Gibt das JavaScript für die Komponente zurück"""
|
||||
```
|
||||
|
||||
## Integration in studio.py
|
||||
|
||||
### 1. Imports hinzufügen
|
||||
|
||||
```python
|
||||
from fastapi import APIRouter
|
||||
from fastapi.responses import HTMLResponse
|
||||
|
||||
from .components import (
|
||||
base,
|
||||
legal_modal,
|
||||
auth_modal,
|
||||
admin_panel,
|
||||
admin_email,
|
||||
admin_dsms,
|
||||
admin_stats,
|
||||
)
|
||||
|
||||
router = APIRouter()
|
||||
```
|
||||
|
||||
### 2. F-String verwenden
|
||||
|
||||
```python
|
||||
@router.get("/app", response_class=HTMLResponse)
|
||||
def app_ui():
|
||||
return f""" # F-String statt normaler String
|
||||
<!DOCTYPE html>
|
||||
...
|
||||
"""
|
||||
```
|
||||
|
||||
### 3. Komponenten-Aufrufe einsetzen
|
||||
|
||||
#### CSS (im `<style>` Tag):
|
||||
```python
|
||||
<style>
|
||||
{base.get_base_css()}
|
||||
|
||||
/* Gemeinsame Styles (Buttons, Forms, etc.) bleiben hier */
|
||||
|
||||
{legal_modal.get_legal_modal_css()}
|
||||
{auth_modal.get_auth_modal_css()}
|
||||
{admin_panel.get_admin_panel_css()}
|
||||
{admin_dsms.get_admin_dsms_css()}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### HTML (im `<body>`):
|
||||
```python
|
||||
<body>
|
||||
<!-- Main Content (Topbar, Sidebar, etc.) bleibt hier -->
|
||||
|
||||
{legal_modal.get_legal_modal_html()}
|
||||
{auth_modal.get_auth_modal_html()}
|
||||
{admin_panel.get_admin_panel_html()}
|
||||
{admin_dsms.get_admin_dsms_html()}
|
||||
</body>
|
||||
```
|
||||
|
||||
#### JavaScript (im `<script>` Tag):
|
||||
```python
|
||||
<script>
|
||||
{base.get_base_js()}
|
||||
|
||||
/* Gemeinsames JS (i18n, notifications, etc.) bleibt hier */
|
||||
|
||||
{legal_modal.get_legal_modal_js()}
|
||||
{auth_modal.get_auth_modal_js()}
|
||||
{admin_panel.get_admin_panel_js()}
|
||||
{admin_email.get_admin_email_js()}
|
||||
{admin_stats.get_admin_stats_js()}
|
||||
{admin_dsms.get_admin_dsms_js()}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Vorteile des Refactorings
|
||||
|
||||
### Wartbarkeit
|
||||
- Jede Komponente ist eigenständig und fokussiert
|
||||
- Änderungen sind isoliert und einfacher zu testen
|
||||
- Code-Reviews sind übersichtlicher
|
||||
|
||||
### Team-Zusammenarbeit
|
||||
- Mehrere Entwickler können parallel an verschiedenen Komponenten arbeiten
|
||||
- Reduzierte Merge-Konflikte
|
||||
- Klare Zuständigkeiten
|
||||
|
||||
### Performance
|
||||
- IDE-Performance deutlich verbessert
|
||||
- Schnelleres Laden in Editoren
|
||||
- Bessere Syntax-Highlighting
|
||||
|
||||
### Testbarkeit
|
||||
- Komponenten können einzeln getestet werden
|
||||
- Mock-Daten für isolierte Tests
|
||||
- Einfacheres Unit-Testing
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
### Vollständige Integration (geschätzt 2-3 Stunden)
|
||||
|
||||
1. **Backup sichern** (bereits erledigt ✓)
|
||||
```bash
|
||||
cp studio.py studio.py.backup
|
||||
```
|
||||
|
||||
2. **Neue studio.py erstellen**
|
||||
- Kopiere Header aus `studio_refactored_demo.py`
|
||||
- Übernimm Main Content aus `studio.py.backup`
|
||||
- Ersetze Modal-Bereiche durch Komponenten-Aufrufe
|
||||
|
||||
3. **Testen**
|
||||
```bash
|
||||
cd backend
|
||||
python -c "from frontend.studio import app_ui; print('OK')"
|
||||
```
|
||||
|
||||
4. **Funktionstest**
|
||||
- Starte die Anwendung
|
||||
- Teste alle Modals (Legal, Auth, Admin, DSMS)
|
||||
- Teste Theme Toggle
|
||||
- Teste Admin-Funktionen
|
||||
|
||||
5. **Cleanup** (optional)
|
||||
- Entferne `studio.py.backup` nach erfolgreichen Tests
|
||||
- Entferne `studio_refactored_demo.py`
|
||||
- Aktualisiere Dokumentation
|
||||
|
||||
## Fehlerbehandlung
|
||||
|
||||
Falls nach der Integration Probleme auftreten:
|
||||
|
||||
1. **Syntax-Fehler**
|
||||
- Prüfe F-String-Syntax: `return f"""...`
|
||||
- Prüfe geschweifte Klammern in CSS/JS (escapen mit `{{` und `}}`)
|
||||
|
||||
2. **Import-Fehler**
|
||||
- Prüfe `__init__.py` in components/
|
||||
- Prüfe relative Imports: `from .components import ...`
|
||||
|
||||
3. **Fehlende Styles/JS**
|
||||
- Vergleiche mit `studio.py.backup`
|
||||
- Prüfe, ob gemeinsame Styles übernommen wurden
|
||||
|
||||
4. **Rollback**
|
||||
```bash
|
||||
cp studio.py.backup studio.py
|
||||
```
|
||||
|
||||
## Wartung
|
||||
|
||||
### Neue Komponente hinzufügen
|
||||
|
||||
1. Erstelle `components/new_component.py`
|
||||
2. Implementiere die 3 Funktionen (css, html, js)
|
||||
3. Exportiere in `components/__init__.py`
|
||||
4. Importiere in `studio.py`
|
||||
5. Rufe in `app_ui()` auf
|
||||
|
||||
### Komponente ändern
|
||||
|
||||
1. Öffne die entsprechende Datei in `components/`
|
||||
2. Ändere CSS/HTML/JS
|
||||
3. Speichern - Änderung wird automatisch übernommen
|
||||
|
||||
## Performance-Metriken
|
||||
|
||||
| Metrik | Vorher | Nachher | Verbesserung |
|
||||
|--------|--------|---------|--------------|
|
||||
| Dateigröße studio.py | 454 KB | ~50 KB | -89% |
|
||||
| Zeilen studio.py | 11.703 | ~2.500 | -78% |
|
||||
| IDE-Ladezeit | ~3s | ~0.5s | -83% |
|
||||
| Größte Datei | 11.703 Z. | 3.000 Z. | -74% |
|
||||
|
||||
## Support
|
||||
|
||||
Bei Fragen oder Problemen:
|
||||
- Siehe `docs/architecture/studio-refactoring-proposal.md`
|
||||
- Backup ist in `studio.py.backup`
|
||||
- Demo ist in `studio_refactored_demo.py`
|
||||
Reference in New Issue
Block a user