ภาพรวม Frontend ของ SML Ai Account (Frontend overview)
หน้าเว็บของ SML Ai Account เป็น Next.js 16 (App Router) + React 19 + Tailwind 4 build แบบ standalone; โค้ดจอบัญชีทั้งหมดอยู่ที่ frontend/account/ และใช้ตัวประกอบร่วม (layout / ui) จาก frontend/shared/.
โน้ตนี้เป็นสารบัญ: บอกโครง route, วิธีที่หน้าจอเรียก backend และลิงก์ไปโน้ตรายหัวข้อทั้ง 19 เรื่อง (ขอบเขต: ไม่รวมโมดูล pos/wms/tms/procure/market/etax/crm ฯลฯ).
ทำงานอย่างไร
เทคโนโลยี
next ^16.3.1,react 19.2.1,react-dom 19.2.1,tailwindcss ^4,typescript ^5(package.json:16-17,30-31);output: "standalone"(next.config.ts:4).- Next 16 ใช้
src/proxy.tsแทน middleware (proxy.ts:27). - alias ใน
tsconfig.json(@/account/*บรรทัด 23,@/shared/*36,@/components/*44-46):@/account/*→account/*;@/components/*ชี้account/*(เช่น@/components/admin/screens/X=account/admin/screens/X),@/components/layout/*→shared/layout/*,@/components/ui/*→shared/ui/*(รายละเอียดใน โครงหน้าเว็บและการนำทาง (App shell & routing)).
โครง route (frontend/src/app/)
| Route | ไฟล์ | หน้าที่ |
|---|---|---|
/ |
page.tsx:8-12 |
redirect ไป /home (ส่ง ?open= ต่อให้ถ้ามี) |
/login |
login/ |
เข้าสู่ระบบ → หน้าเข้าสู่ระบบและเลือกฐานข้อมูล (Login & select database) |
/select-database |
select-database/ |
เลือกฐานข้อมูลหลัง login → หน้าเข้าสู่ระบบและเลือกฐานข้อมูล (Login & select database) |
/home |
(app)/home/page.tsx |
พื้นที่ทำงานแบบหลายแท็บ (จอบัญชีทั้งหมดเปิดเป็นแท็บ) → พื้นที่ทำงานแบบแท็บ MDI และสิทธิ์จอ (TabWorkspace) |
/admin/* |
(admin)/admin/* |
โซนผู้ดูแลระบบส่วนกลาง (mode==="admin" หรือผู้ชมสาธิต) → หน้าจอผู้ดูแลระบบส่วนกลาง (Admin Console) |
/api/process, /api/query, /api/auth, /api/admin, /api/help |
api/*/route.ts |
ตัวส่งต่อไป Go backend → เส้นทาง API ฝั่ง Next.js ที่ส่งต่อไป Go backend (API proxy routes) |
(ในโฟลเดอร์ src/app/ ยังมีโมดูลอื่น เช่น pos, wms, crm, ai ฯลฯ ซึ่งอยู่นอกขอบเขตโน้ตชุดนี้ จึงไม่ได้อ่าน)
หน้าจอเรียก backend อย่างไร (สองทาง)
/api/query/*— เบราว์เซอร์ประกอบ SQL เอง (escape ด้วยescapeSql) แล้วส่งผ่านquery-client.ts; ใช้กับข้อมูลหลักและค้นหา → ตัวเรียก API และตัวประกอบ SQL ฝั่งเบราว์เซอร์ (api-client, query-client, sml-query-builder)./api/process/<กลุ่ม>/<action>— route ตรวจ whitelist แล้วproxyToService("/api/v1/process/..."); ใช้กับงานที่มีกติกาธุรกิจ (บันทึกเอกสาร, รายงาน, ปิดงวด, ตรวจสต๊อก ฯลฯ) → เส้นทาง API ฝั่ง Next.js ที่ส่งต่อไป Go backend (API proxy routes), จอประมวลผลระบบและ POS (System Process Workbench & POS Setup).
- ทุก route ตรวจ session จาก cookie แล้วแนบ JWT ของ backend (เก็บอยู่ใน cookie เซสชันที่เซ็นลายเซ็น ไม่เปิดให้ JS เห็น) → เซสชันและการยืนยันตัวตนฝั่ง frontend (Auth session & tokens). รูปคำตอบเดียวกันทุกที่:
{ ok:true, data }หรือ{ ok:false, error, code }.
สารบัญโน้ต frontend (19 เรื่อง)
ที่มาในโค้ด
frontend/package.json:16-17,30-31— เวอร์ชัน Next / React / Tailwind / TypeScript.frontend/next.config.ts:4—output: "standalone".frontend/src/proxy.ts:27— ด่านแรกก่อนเข้าทุกหน้า (รายละเอียดใน โครงหน้าเว็บและการนำทาง (App shell & routing)).frontend/src/app/page.tsx:8-12—/redirect/home.frontend/src/app/(app)/home/page.tsx:14— หน้าเดียวของแอปบัญชี.frontend/src/app/(admin)/layout.tsx:18-21— ด่านเข้าโซน admin.frontend/tsconfig.json:23,36,44-46— path alias.
ดูเพิ่ม
สมอง SML — หน้าแรก (Map of Content) · ภาพรวม Backend Go ของ SML Ai Account (Backend overview) · ภาพรวมระบบบัญชี SML AI Account (Accounting Overview) · ภาพรวมกลุ่ม process ของ Backend (Process overview) · สารบัญมาตรฐานและกฎเหล็กของ SML Ai Account (Standards Overview)