Trình Soạn Thảo Trực Tiếp (Live In-Place Editor)

---

1. Giới Thiệu Tính Năng

Live In-Place Editor là tính năng độc quyền cho phép Stylist Trần Tú Linh trực tiếp chỉnh sửa nội dung văn bản, các mốc kinh nghiệm và thêm/sửa/xóa dự án ngay trên giao diện web thực tế (What You See Is What You Get - WYSIWYG) mà không cần đăng nhập vào trang CMS quản trị phức tạp.

sequenceDiagram
    autonumber
    actor Stylist as Stylist Trần Tú Linh
    participant UI as Giao Diện Web (/index.html)
    participant Auth as Popup Mã PIN (Editor Modal)
    participant API as Endpoint /api/save
    participant KV as Cloudflare KV Store

    Stylist->>UI: Nhấn biểu tượng Bút Chì hoặc phím tắt Edit
    UI->>Auth: Mở hộp thoại yêu cầu nhập mã PIN bảo mật
    Stylist->>Auth: Nhập mã PIN (VD: 'stella2026')
    Auth->>API: Gửi POST /api/save (Kiểm tra Header X-Admin-Pin)
    alt Mã PIN hợp lệ
        API-->>UI: Xác thực thành công (HTTP 200)
        UI-->>Stylist: Kích hoạt chế độ ContentEditable (Viền vàng sáng)
        Stylist->>UI: Bấm vào chữ để sửa trực tiếp, thêm/xóa thẻ dự án
        Stylist->>UI: Bấm "Lưu Thay Đổi" trên thanh công cụ nổi
        UI->>API: Gửi toàn bộ payload JSON dữ liệu mới
        API->>KV: Lưu vào key PORTFOLIO_DATA
        KV-->>API: Thành công
        API-->>UI: Trả về trạng thái lưu thành công
        UI-->>Stylist: Hiển thị thông báo "Đã lưu thành công lên Cloudflare KV!"
    else Mã PIN không chính xác
        API-->>UI: Lỗi HTTP 401 Unauthorized
        UI-->>Stylist: Báo lỗi "Mã PIN không hợp lệ!"
    end

---

2. Các Vùng Có Thể Chỉnh Sửa Trực Tiếp

1. Thông tin cá nhân & Số liệu:
   • Họ tên, nghệ danh, dòng tiêu đề chuyên môn (Tagline).
   • Đoạn giới thiệu tiểu sử (Bio).
   • 3 Số liệu thống kê: Số bộ sưu tập, Số năm sáng tạo, Tỷ lệ độc bản.
2. Tuyên ngôn nghệ thuật:
   • Tiêu đề tuyên ngôn và đoạn văn bản Manifesto.
3. Dòng thời gian kinh nghiệm (Experience Timeline):
   • Chỉnh sửa mốc thời gian, vị trí, công ty và nội dung chi tiết các dự án styling.
   • Thêm mốc kinh nghiệm mới hoặc xóa mốc cũ.
4. Bộ sưu tập & Dự án (Projects CRUD):
   • Thêm dự án mới với tiêu đề, năm thực hiện, thể loại, mô tả và đường dẫn ảnh.
   • Sửa đổi nội dung của dự án hiện có.
   • Xóa dự án không còn hoạt động.
5. Thông tin liên hệ & Mạng xã hội:
   • Email nhận booking, hotline, địa chỉ studio, link Instagram, Facebook, TikTok.

---

3. Bảo Mật & Xác Thực Mã PIN

• Mã PIN bảo mật (CF_ADMIN_PIN): Được cấu hình an toàn trong biến môi trường của Cloudflare Pages, không bao giờ lộ ra mã nguồn công khai trên trình duyệt của khách truy cập.
• Mã hóa truyền tải: Toàn bộ giao tiếp giữa trình duyệt và Edge Functions được bảo vệ qua kết nối HTTPS có mã hóa TLS 1.3.
• Tự động đóng phiên làm việc: Khi tải lại trang hoặc bấm nút "Thoát chế độ sửa", giao diện trở về trạng thái người xem thông thường để đảm bảo an toàn.