77 lines
5.2 KiB
Markdown
77 lines
5.2 KiB
Markdown
# Frontend Jelenlegi Állapot (Current State)
|
|
|
|
Ez a dokumentum a jelenlegi `frontend` könyvtár állapotát, könyvtárszerkezetét, valamint a technológiai stack és a layout/login elemek felépítését foglalja össze az architektúra tervező AI számára.
|
|
|
|
## 1. Könyvtárszerkezet
|
|
|
|
A `frontend` mappa egy Vue 3 + Vite alapú projektstruktúrát követ.
|
|
|
|
```text
|
|
frontend/
|
|
├── Dockerfile, docker-compose.yml, nginx.conf # Infrastruktúra és deployment
|
|
├── package.json, vite.config.ts, tsconfig.json # Konfigurációs fájlok (Vite, TS)
|
|
├── tailwind.config.js, postcss.config.js # UI és stílus konfigok
|
|
├── public/ # Statikus asset-ek (képek, logók)
|
|
│ ├── sf_logo_ok.png, sf_alarm_light_01.png, sf_mobile_garage_1.png, stb.
|
|
└── src/ # Fő forráskód
|
|
├── App.vue, main.ts, env.d.ts
|
|
├── assets/ # CSS és egyéb bedrótozott assetek (main.css)
|
|
├── components/ # Újrafelhasználható Vue komponensek
|
|
│ ├── LanguageSwitcher.vue, ModeSwitcher.vue, TileCard.vue
|
|
├── layouts/ # Oldal layoutok (struktúra)
|
|
│ ├── AdminLayout.vue, ConsumerLayout.vue, CorporateLayout.vue
|
|
├── locales/ # Nyelvi fájlok (i18n)
|
|
├── router/ # Vue Router beállítások
|
|
│ └── index.ts
|
|
├── services/ # API és üzleti logika szolgáltatások
|
|
│ └── translationService.ts
|
|
├── stores/ # Állapotkezelés (Pinia)
|
|
│ ├── appModeStore.ts, authStore.ts
|
|
└── views/ # Oldal komponensek (Nézetek)
|
|
├── AboutView.vue, LandingView.vue, LoginView.vue
|
|
├── AdminDashboard.vue, AdminSystemView.vue, AdminUsersView.vue, stb.
|
|
```
|
|
|
|
## 2. UI/CSS Keretrendszerek és Routing (Vue Router)
|
|
|
|
- **UI / CSS Keretrendszer**: Tailwind CSS (v3.4.0) van beállítva (Autoprefixer-rel és PostCSS-sel), egyedi színekkel (pl. `sf-blue`, `sf-green`) és egyéni komponensekkel kiegészítve.
|
|
- **Állapotkezelés**: Pinia (v2.1.7).
|
|
- **Fordítás (i18n)**: Vue I18n (v9.11.0).
|
|
- **Routing**: `vue-router` (v4.3.0) van bekonfigurálva.
|
|
- A `src/router/index.ts`-ben definiált főbb útvonalak: `/` (Landing), `/about`, `/login`, és az adminisztrációs útvonalak (`/admin`, `/admin/users`, `/admin/vehicles` stb.).
|
|
- A router használ metaadatokat (`meta: { layout: 'default' | 'none' | 'admin', requiresAdmin: true }`) a különböző Layout-ok alkalmazásához.
|
|
- Tartalmaz egy **globális navigációs guardot (beforeEach)**, ami a Pinia `authStore`-ra támaszkodva figyeli a bejelentkezett állapotot és blokkolja a jogosulatlan hozzáférést a `requiresAdmin` útvonalakon, valamint megkísérli inicializálni az `authStore`-t az első betöltéskor.
|
|
|
|
## 3. A Belépési (Login) oldal és Layoutok kialakítása
|
|
|
|
### Login Oldal (`LoginView.vue`)
|
|
- Az útvonalhoz `meta: { layout: 'none' }` van rendelve, így egyedi, layout-független teljes képernyős megjelenést kap.
|
|
- Egy komplex vizuális élményt nyújt: a `/sf_mobile_garage_1.png` képet használja homályosított háttérként, egy kék-zöld színátmenettel rétegezve.
|
|
- A kártya dizájnt (Glassmorphism stílus, `backdrop-blur-xl`, `bg-white/10`) alkalmaz, amely tartalmaz e-mail, jelszó mezőket, "Emlékezz rám" opciót, valamint integrációs mock gombokat (Apple ID, Google).
|
|
- Az adatok beküldését a Pinia `authStore.login()` függvénye dolgozza fel.
|
|
|
|
### Layoutok (`ConsumerLayout.vue`, `AdminLayout.vue`, `CorporateLayout.vue`)
|
|
- Példaként a `ConsumerLayout.vue` egy kidolgozott, responsive fejlécet és láblécet tartalmaz.
|
|
- Fix UI elemeket használ, mint például a logó (`sf_logo_ok.png`), naptár grafika (`sf_naptar.png`), és animált (`pulse`) riasztófény (`sf_alarm_light_01.png`), amik a háttérben jelennek meg.
|
|
- Dinamikus fejléc-menüt (LanguageSwitcher, ModeSwitcher slotok), reszponzív bejelentkezés gombot és "Quick Actions" paneleket ("Vehicle Registration", "Service Booking", "Cost Tracking") tartalmaz.
|
|
- Ez az architekturális irányvonal jelzi, hogy az UI már grafikai koncepciókkal is el lett látva és a felület nagyjából tükrözi az építendő ökoszisztéma hangulatát.
|
|
|
|
## 4. package.json és főbb függőségek
|
|
|
|
**Csomagnév:** `service-finder-frontend` (Vue + TypeScript + Vite környezet)
|
|
|
|
*Fő (Production) függőségek:*
|
|
- `vue` (^3.4.0)
|
|
- `vue-router` (^4.3.0)
|
|
- `pinia` (^2.1.7)
|
|
- `vue-i18n` (^9.11.0)
|
|
- `axios` (^1.6.0)
|
|
|
|
*Fejlesztői (Dev) függőségek:*
|
|
- `vite` (^5.0.0) és `@vitejs/plugin-vue` (^5.0.0)
|
|
- `typescript` (~5.3.0) és `vue-tsc` (^1.8.0)
|
|
- `tailwindcss` (^3.4.0), `postcss` (^8.4.32), `autoprefixer` (^10.4.16)
|
|
- `eslint` (^8.56.0), `eslint-plugin-vue` és `@vue/eslint-config-typescript`
|
|
|
|
Összefoglalva: A frontend egy modern Vue 3 (Composition API) alapú architektúrával, TailwindCSS dizájnnal és Vite build eszközzel rendelkezik. A routing, auth és layout struktúra szilárd alapként szolgál a további fejlesztésekhez.
|