62 lines
2.3 KiB
Markdown
62 lines
2.3 KiB
Markdown
# Tài liệu Kiến trúc C4 - Mức 3: Component Diagram (Landing Page)
|
|
|
|
Chi tiết hóa các thành phần logic trong **Sales Landing App** và **BFF Service**.
|
|
|
|
## 1. Frontend Components (Sales Landing App)
|
|
|
|
### 1.1. Modules
|
|
- **Auth Module**: Form đăng nhập, xử lý Token.
|
|
- **Customer Module**: Form nhập liệu, Component Camera/Upload cho OCR.
|
|
- **Product Module**: Giao diện chọn sản phẩm (Card chọn UVL-IC/UVL-EL).
|
|
- **Illustration Module**: Hiển thị PDF (PDF Viewer) và nút tải về/Submit.
|
|
|
|
### 1.2. Shared
|
|
- **UI Kit**: Button, Input, Modal (theo Design System).
|
|
- **API Client**: Axios wrapper để gọi BFF.
|
|
|
|
## 2. Backend Components (BFF Service)
|
|
|
|
### 2.1. Controllers
|
|
- **AuthController**: Xác thực với Auth API.
|
|
- **OCRController**: Proxy ảnh sang OCR Service.
|
|
- **IllustrationController**: Tổng hợp dữ liệu -> Gọi PDF Engine -> Trả về URL/File.
|
|
- **SubmissionController**: Gửi dữ liệu cuối cùng về Core.
|
|
|
|
### 2.2. Services
|
|
- **ClientService**: Lưu/Lấy thông tin khách hàng từ Database.
|
|
|
|
## 3. Sơ đồ Component
|
|
|
|
```mermaid
|
|
C4Component
|
|
title Component Diagram - Landing Page System
|
|
|
|
Container_Boundary(frontend, "Sales Landing App") {
|
|
Component(c_auth, "Auth Module", "React", "Login Screen")
|
|
Component(c_cust, "Customer Module", "React", "Form & OCR Upload")
|
|
Component(c_pdf, "Illustration Module", "React", "PDF View & Submit")
|
|
}
|
|
|
|
Container_Boundary(backend, "BFF Service") {
|
|
Component(ctl_ocr, "OCR Controller", "Node.js", "Handle Upload & Proxy")
|
|
Component(ctl_ill, "Illustration Controller", "Node.js", "Coordinate PDF Gen")
|
|
Component(svc_client, "Client Service", "Node.js", "Manage Client Data DB")
|
|
}
|
|
|
|
ContainerDb(db, "PostgreSQL", "Database", "Store Drafts")
|
|
System_Ext(ocr_ext, "External OCR", "Service")
|
|
System_Ext(pdf_ext, "External PDF Gen", "Service")
|
|
|
|
Rel(c_auth, ctl_ocr, "Authenticated Req")
|
|
Rel(c_cust, ctl_ocr, "Upload Image")
|
|
Rel(c_cust, ctl_ill, "Request PDF")
|
|
|
|
Rel(ctl_ocr, ocr_ext, "Proxy")
|
|
Rel(ctl_ill, pdf_ext, "Proxy")
|
|
Rel(ctl_ill, svc_client, "Save Info")
|
|
Rel(svc_client, db, "Persist")
|
|
```
|
|
|
|
---
|
|
*Biên soạn bởi: Agent mbl-landing-page-architecture*
|