49 lines
1.6 KiB
Markdown
49 lines
1.6 KiB
Markdown
# Tài liệu Kiến trúc C4 - Mức 4: Code Documentation (Frontend Store)
|
|
|
|
Mô tả chi tiết cấu trúc quản lý dữ liệu (State Management) tại Frontend để phục vụ luồng nghiệp vụ phức tạp.
|
|
|
|
## 1. Global State (Zustand/Context)
|
|
|
|
Để đảm bảo dữ liệu khách hàng được lưu giữ khi chuyển giữa các trang (Chọn sản phẩm -> Quay lại sửa thông tin -> Xem PDF), sử dụng Global Store.
|
|
|
|
### `useCustomerStore`
|
|
- **State**:
|
|
- `personalInfo`: { name, cccd, dob, gender, ... }
|
|
- `ocrStatus`: 'idle' | 'scanning' | 'success' | 'error'
|
|
- `selectedProduct`: 'UVL-IC' | 'UVL-EL' | null
|
|
- `illustrationUrl`: string (Link PDF)
|
|
|
|
- **Actions**:
|
|
- `updateInfo(field, value)`
|
|
- `setOCRData(data)`
|
|
- `resetSession()`
|
|
|
|
## 2. Sequence Diagram: Luồng OCR & Tạo PDF
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User as Sales Agent
|
|
participant FE as Frontend (Store)
|
|
participant BFF as Backend BFF
|
|
participant OCR as OCR Service
|
|
participant PDF as PDF Engine
|
|
|
|
User->>FE: Upload ảnh CCCD
|
|
FE->>BFF: POST /api/ocr (image)
|
|
BFF->>OCR: Extract Info
|
|
OCR-->>BFF: {name, cccd, dob...}
|
|
BFF-->>FE: Return JSON
|
|
FE->>FE: Update Store (personalInfo)
|
|
FE-->>User: Hiển thị Form (đã điền sẵn)
|
|
|
|
User->>FE: Chọn SP & Nhấn "Xem Minh Họa"
|
|
FE->>BFF: POST /api/illustration {info, product}
|
|
BFF->>PDF: Generate Request
|
|
PDF-->>BFF: PDF Stream/URL
|
|
BFF-->>FE: Return URL
|
|
FE-->>User: Hiển thị PDF Viewer
|
|
```
|
|
|
|
---
|
|
*Biên soạn bởi: Agent mbl-landing-page-architecture*
|