📖 Hướng Dẫn Sử Dụng Invoice Playground

🎛️ Thanh Công Cụ (Toolbar)

  • 💾 Save: Lưu trạng thái hiện tại (bao gồm tất cả nội dung, cài đặt, chế độ sáng/tối, kích thước panel, v.v.)
  • 🔄 Reset: Khôi phục về trạng thái đã lưu gần nhất
  • 📁 Load Mock Data: Tải dữ liệu mẫu để thử nghiệm
  • ↶ Undo / ↷ Redo: Hoàn tác hoặc làm lại thay đổi trong editor đang focus (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z)
  • 📦 Export ZIP: Xuất tất cả file thành file ZIP với tên tự động bao gồm timestamp
  • 📥 Import ZIP: Nhập file ZIP đã xuất trước đó, tự động điền thông tin từ tên file
  • ⊟ Collapse All / ⊞ Expand All: Thu gọn hoặc mở rộng tất cả các editor section
  • 🌙 Dark Mode / ☀️ Light Mode: Chuyển đổi giữa chế độ tối và sáng cho toàn bộ giao diện

📝 Các Editor Sections

  • Template Code (Liquid): Code template chính sử dụng cú pháp Liquid. Hỗ trợ alias draftOrder cho order
  • Styles (CSS): CSS styles với Liquid syntax, được inject vào template khi render
  • Order Object (JSON): Dữ liệu order mẫu (hoặc draftOrder)
  • Template Object (JSON): Cấu hình template (font, size, barcode, v.v.)
  • Configuration Object (JSON): Thông tin cửa hàng (logo, địa chỉ, số điện thoại, v.v.)
  • Text Object (JSON): Các text labels đa ngôn ngữ

🎨 Tính Năng Editor

  • Syntax Highlighting: Highlight cú pháp cho Liquid, JSON, CSS
  • Fira Code Font: Font lập trình chuyên nghiệp với ligatures
  • Dracula Theme: Theme tối đẹp mắt (dark mode)
  • VS Theme: Theme sáng sạch sẽ (light mode)
  • Line Numbers: Hiển thị số dòng
  • Cursor Position: Hiển thị vị trí con trỏ ở góc dưới phải mỗi editor

🖱️ Thao Tác Với Editor

  • Click vào header section: Thu gọn/mở rộng section đó
  • Kéo thả section: Di chuyển để sắp xếp lại thứ tự các section (thứ tự được lưu tự động)
  • Kéo đường viền giữa sections: Thay đổi kích thước chiều cao của section
  • Keyboard shortcuts: Tất cả shortcuts của VS Code đều hoạt động (Find, Replace, Multi-cursor, v.v.)

↔️ Panel Resize & Collapse

  • Kéo thanh dọc giữa: Thay đổi kích thước giữa Editors Panel và Preview Panel
  • Click vào giữa thanh dọc: Thu gọn/mở rộng Editors Panel (click trong vùng 40px từ tâm)

🖼️ Preview Panel

  • Live Preview: Tự động cập nhật khi bạn chỉnh sửa (debounce 300ms)
  • Paper Size: Chọn kích thước giấy (Letter, A4, Legal, v.v.)
  • Error Display: Hiển thị lỗi Liquid syntax ngay trong preview với số dòng chính xác

💾 Lưu Trữ & Import/Export

  • Session Storage: Tự động lưu nội dung khi làm việc (không mất khi refresh)
  • Local Storage: Lưu preferences (dark mode, paper size, section order)
  • Export Format: pdf_invoice_[tsName]_[storeName]_[templateName]_[date]_[time].zip
  • Import Parse: Tự động parse tên file và điền vào các input field
  • Auto-load Mock: Tự động load dữ liệu mẫu khi mở lần đầu

⚠️ Xử Lý Lỗi

  • Syntax Error: Hiển thị lỗi với số dòng chính xác trong Template Editor
  • Line Calculation: Tự động tính offset do styles injection
  • Error Tips: Gợi ý sửa lỗi phổ biến (ví dụ: dùng != thay vì !==)
  • Visual Feedback: Hiển thị lỗi trong preview với format dễ đọc

🎯 Tips & Tricks

  • Nhấn Ctrl/Cmd+S để save nhanh
  • Nhấn Ctrl/Cmd+Z để undo, Ctrl/Cmd+Shift+Z để redo
  • Sử dụng draftOrder thay vì order khi làm việc với draft orders
  • Click Reset để quay về trạng thái an toàn nếu có lỗi
  • Export ZIP thường xuyên để backup công việc
  • Kéo thả sections để sắp xếp theo ý thích
  • Thu gọn sections không dùng để tập trung vào code quan trọng

🔧 Input Fields

  • TS Name: Tên TS (dùng trong tên file export)
  • Store Name: Tên cửa hàng (dùng trong tên file export)
  • Template Name: Tên template (dùng trong tên file export, giữ nguyên chữ hoa/thường)
  • Paper Size: Kích thước giấy cho preview (Letter, A4, Legal, Tabloid, A3, A5)
Template Code (Liquid)
▼
AI Diff
Styles (CSS)
▼
AI Diff
AI Template Editor

📋 Data Editors

Preview (Letter Size: 8.5" × 11")

BEFORE
AFTER