frontend költség beállítások
This commit is contained in:
Roo
199
docs/p0_vehicle_details_ui_ux_audit_2026-06-19.md
Normal file
199
docs/p0_vehicle_details_ui_ux_audit_2026-06-19.md
Normal file
@@ -0,0 +1,199 @@
|
||||
# 🚨 P0 UI/UX AUDIT — Vehicle Details Page Rendering
|
||||
|
||||
**Dátum:** 2026-06-19
|
||||
**Auditor:** Rendszer-Architect
|
||||
**Hatáskör:** `VehicleDetailsView.vue` + all 5 tab components
|
||||
**Státusz:** 🔴 KRITIKUS — beavatkozás szükséges
|
||||
|
||||
---
|
||||
|
||||
## 1. AUDIT — Fejléc (Header) Olvashatóság
|
||||
|
||||
### Vizsgált fájl
|
||||
`frontend/src/views/vehicles/VehicleDetailsView.vue`
|
||||
|
||||
### Háttér rétegek (layer stacking)
|
||||
|
||||
| Réteg | CSS | Leírás |
|
||||
|-------|-----|--------|
|
||||
| `z-0` | `fixed inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed` (sor 4) | Teljes képernyős garázs háttérkép |
|
||||
| `z-10` | `relative mx-auto max-w-7xl px-4 py-8` (sor 7) | Tartalom réteg |
|
||||
| Body | `bg-[#04151F]` (main.css sor 10) | Sötétkék body háttér |
|
||||
|
||||
### Fejléc elemek és színeik
|
||||
|
||||
| Elem | Sor | CSS class | Szín |
|
||||
|------|-----|-----------|------|
|
||||
| Vissza gomb | 11 | `text-white/80` + `bg-white/10` | 80% fehér szöveg, 10% fehér háttér |
|
||||
| Rendszám (H1) | 40 | `text-white` | `#ffffff` (tiszta fehér) |
|
||||
| Márka/Modell/Év | 43 | `text-white/60` | 60% fehér (`rgba(255,255,255,0.6)`) |
|
||||
| Tab navigáció | 52-58 | `text-white` / `text-white/50` | Tiszta fehér / 50% fehér |
|
||||
|
||||
### 🔴 PROBLÉMA: Nincs sötétítő overlay
|
||||
|
||||
A `VehicleDetailsView.vue:4` **egyáltalán nem tartalmaz sötétítő réteget** a `garage-bg.png` fölött. A `z-0` rétegen lévő kép közvetlenül a tartalom alatt van, semmilyen `bg-black/40`, sem `backdrop-brightness-50`, sem `overlay` nincs alkalmazva.
|
||||
|
||||
**Következmény:** Ha a `garage-bg.png` világos színtartományokat tartalmaz (ami egy garázs/workshop képnél tipikus), a `text-white` és `text-white/60` szövegek teljesen olvashatatlanná válnak.
|
||||
|
||||
> ⚠️ **Megjegyzés:** Ugyanez a probléma áll fenn a `FleetView.vue:3-6` esetében is, ahol a komment is jelzi: `"Garage Background Image (no dark overlay)"`.
|
||||
|
||||
---
|
||||
|
||||
## 2. AUDIT — Tab Konzisztencia
|
||||
|
||||
### CSS osztályok összehasonlítása
|
||||
|
||||
#### `OverviewTab.vue` — 🟦 **Light Theme (White Cards)**
|
||||
|
||||
| Elem | CSS class (sor) |
|
||||
|------|-----------------|
|
||||
| Photo div | `bg-white border-slate-200 shadow-sm rounded-2xl` (sor 6) |
|
||||
| Basic Info card | `bg-white border-slate-200 shadow-sm rounded-2xl p-6` (sor 15) |
|
||||
| MOT card | `bg-white border-slate-200 shadow-sm rounded-2xl p-5` (sor 55) |
|
||||
| Mileage card | `bg-white border-slate-200 shadow-sm rounded-2xl p-5` (sor 72) |
|
||||
| Next Service card | `bg-white border-slate-200 shadow-sm rounded-2xl p-5` (sor 89) |
|
||||
| **Szövegszínek** | `text-slate-900`, `text-slate-700`, `text-slate-500` |
|
||||
|
||||
#### `TechDataTab.vue`, `ServiceBookTab.vue`, `FinancialsTab.vue`, `DocumentsTab.vue` — 🟩 **Dark Glassmorphism Theme (mind a 4)**
|
||||
|
||||
| Elem | CSS class (sor) |
|
||||
|------|-----------------|
|
||||
| Container | `bg-white/5 border-white/10 backdrop-blur-sm rounded-2xl p-6` (sor 2) |
|
||||
| Szövegszínek | `text-white`, `text-white/50` |
|
||||
|
||||
### 🔴 PROBLÉMA: Teljes stilisztikai szakadás
|
||||
|
||||
| Aspektus | OverviewTab | 4 másik tab |
|
||||
|----------|-------------|-------------|
|
||||
| **Háttér** | `bg-white` (tiszta fehér) | `bg-white/5` (áttetsző, 5% fehér) |
|
||||
| **Border** | `border-slate-200` (sötétszürke) | `border-white/10` (halvány fehér) |
|
||||
| **Szöveg** | `text-slate-900` (sötétszürke) | `text-white` (fehér) |
|
||||
| **Hatás** | `shadow-sm` | `backdrop-blur-sm` (üvegesség) |
|
||||
| **Vizuális hangulat** | Hagyományos light card | Modern dark glassmorphism |
|
||||
|
||||
Az `OverviewTab.vue` **teljesen más tervezési rendszert** használ, mint a másik 4 tab. Ez vizuális sokkot okoz a tab váltáskor: a többi tab szépen beleolvad a sötét háttérbe, az OverviewTab viszont hirtelen "kiugró" fehér kártyákat mutat.
|
||||
|
||||
---
|
||||
|
||||
## 3. AUDIT — Hiányzó Járműfotó
|
||||
|
||||
### Vizsgált fájl
|
||||
`frontend/src/components/vehicles/tabs/OverviewTab.vue`
|
||||
|
||||
### Jelenlegi állapot (sorok 6-12)
|
||||
|
||||
```html
|
||||
<div class="flex aspect-[16/9] items-center justify-center overflow-hidden
|
||||
rounded-2xl border border-slate-200 bg-white shadow-sm lg:aspect-square">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1503376712341-a67b5e40e2d1?auto=format&fit=crop&w=800&q=80"
|
||||
alt="Vehicle photo"
|
||||
class="h-full w-full object-cover rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 🔴 PROBLÉMA: 3 rétegű hiba
|
||||
|
||||
1. **Hardcode-olt stock fotó, nem a valós jármű** — A kép URL egy fix Unsplash link, minden járműnél ugyanaz a piros sportautó jelenik meg.
|
||||
|
||||
2. **Nincs hibakezelés betöltési hibára** — Ha az Unsplash CDN:
|
||||
- Letiltja a hotlinkinget (CORS/403)
|
||||
- Időtúllépés (timeout)
|
||||
- Hálózati hiba
|
||||
- **Akkor a felhasználó egy üres fehér dobozt lát**, mert nincs `@error` eseménykezelés és nincs fallback placeholder.
|
||||
|
||||
3. **Fehér háttér a sötét téma közepén** — A `bg-white border-slate-200` miatt, ha a kép nem tölt be, egy nagy fehér téglalap látszik a sötét háttér előtt, ami vizuálisan "kiég".
|
||||
|
||||
---
|
||||
|
||||
## 4. Architect Javaslatok
|
||||
|
||||
### 4.1 Fejléc olvashatóság javítása
|
||||
|
||||
**Ajánlott megoldás:** Sötétített overlay réteg bevezetése a header mögött.
|
||||
|
||||
**Lehetőség A — Header gradient sáv (ajánlott):**
|
||||
Helyezzünk egy sötét gradient sávot közvetlenül a fejléc szövegek mögé (relative pozícionálással), ami blokkolja a `garage-bg.png` világos részeit:
|
||||
|
||||
```css
|
||||
/* Egy sötét gradient overlay a header div-en belül */
|
||||
.header-overlay {
|
||||
background: linear-gradient(to bottom, rgba(4,21,31,0.85) 0%, rgba(4,21,31,0.4) 100%);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
**Lehetőség B — Teljes oldalas overlay (gyors megoldás):**
|
||||
A `garage-bg.png` div és a tartalom közé egy további `z-5` réteg:
|
||||
|
||||
```html
|
||||
<div class="fixed inset-0 z-[5] bg-black/40"></div>
|
||||
```
|
||||
|
||||
### 4.2 Tab egységesítés
|
||||
|
||||
**Ajánlott irány:** Az összes tabot a Dark Glassmorphism (`bg-white/5 backdrop-blur-sm border-white/10`) stílusra kell átállítani, hogy az egész oldal egységes, modern, sötét témájú maradjon.
|
||||
|
||||
| Módosítandó elem | Jelenlegi | Javasolt |
|
||||
|------------------|-----------|----------|
|
||||
| OverviewTab photo div | `bg-white border-slate-200 shadow-sm` | `bg-white/5 border-white/10 backdrop-blur-sm` |
|
||||
| OverviewTab info card | `bg-white border-slate-200 shadow-sm p-6` | `bg-white/5 border-white/10 backdrop-blur-sm p-6` |
|
||||
| OverviewTab vital cards (x3) | `bg-white border-slate-200 shadow-sm p-5` | `bg-white/5 border-white/10 backdrop-blur-sm p-5` |
|
||||
| OverviewTab szövegek | `text-slate-900/700/500` | `text-white/90/70/50` |
|
||||
| Icon bg-k (MOT, mileage, service) | `bg-amber-100`, `bg-blue-100`, `bg-emerald-100` | `bg-amber-500/20`, `bg-blue-500/20`, `bg-emerald-500/20` |
|
||||
| Icon színek | `text-amber-600`, `text-blue-600`, `text-emerald-600` | `text-amber-300`, `text-blue-300`, `text-emerald-300` |
|
||||
|
||||
### 4.3 Járműfotó javítása
|
||||
|
||||
**Kötelező változtatások:**
|
||||
|
||||
1. **Dinamikus képforrás** — Az `src` attribute-nak a backendről kell jönnie (pl. `vehicle.photo_url`), és ha nincs fotó, egy placeholder SVG-t kell mutatni.
|
||||
|
||||
2. **Fallback és hibakezelés** — Az `<img>` tagon `@error` eseménykezelő, ami placeholder-re vált:
|
||||
|
||||
```html
|
||||
<img
|
||||
:src="vehicle.photo_url || placeholderUrl"
|
||||
alt="Vehicle photo"
|
||||
class="h-full w-full object-cover rounded-2xl"
|
||||
@error="onImageError"
|
||||
/>
|
||||
```
|
||||
|
||||
```ts
|
||||
const imageError = ref(false)
|
||||
const onImageError = () => { imageError.value = true }
|
||||
```
|
||||
|
||||
3. **Placeholder komponens** — Ha a kép nem tölt be, egy jármű SVG ikon jelenjen meg:
|
||||
```html
|
||||
<div v-if="imageError || !vehicle.photo_url"
|
||||
class="flex h-full w-full items-center justify-center bg-white/5">
|
||||
<svg class="h-16 w-16 text-white/30" ...>
|
||||
<!-- Vehicle silhouette icon -->
|
||||
</svg>
|
||||
<p class="text-sm text-white/30">{{ t('vehicleDetail.noPhoto') }}</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 4.4 Hatásvizsgálat: Érintett fájlok
|
||||
|
||||
| Fájl | Módosítás típusa |
|
||||
|------|------------------|
|
||||
| `VehicleDetailsView.vue` (`frontend/src/views/vehicles/VehicleDetailsView.vue`) | Overlay réteg hozzáadása a header köré |
|
||||
| `OverviewTab.vue` (`frontend/src/components/vehicles/tabs/OverviewTab.vue`) | Teljes CSS átállítás light → dark glassmorphism + kép placeholder logika |
|
||||
| `FleetView.vue` (`frontend/src/views/vehicles/FleetView.vue`) | (Ajánlott) Ugyanez az overlay javítás, mivel itt is ugyanaz a probléma |
|
||||
|
||||
---
|
||||
|
||||
## Összefoglaló
|
||||
|
||||
| # | Probléma | Súlyosság | Érintett fájl(ok) |
|
||||
|---|----------|-----------|-------------------|
|
||||
| 1 | Fehér szöveg világos háttérképen — nincs overlay | 🔴 **KRITIKUS** | `VehicleDetailsView.vue:4,40-43` |
|
||||
| 2 | Tab stílusok teljes inkonzisztenciája (light vs dark) | 🔴 **KRITIKUS** | `OverviewTab.vue` vs összes többi tab |
|
||||
| 3 | Hiányzó járműfotó / nincs fallback | 🟡 **MAGAS** | `OverviewTab.vue:6-12` |
|
||||
|
||||
**Ajánlott beavatkozási sorrend:** ① Tab egységesítés (glassmorphism) → ② Header overlay → ③ Photo placeholder + error handling
|
||||
Reference in New Issue
Block a user