ระบบ

ดีไซน์ระบบ

สี ฟอนต์ และชิ้นส่วนหน้าจอทั้งหมดที่ ChatCart ใช้ หน้านี้เป็นแหล่งอ้างอิงเวลาทำหน้าจอใหม่ ทุกชิ้นในหน้านี้คือของจริงจาก assets/app.css

ชุดสี

ค่าเริ่มต้นคือ Clay (ดินเผา) เปลี่ยนได้จากปุ่มจานสีมุมขวาบน แล้วทั้งระบบเปลี่ยนตามทันที

Clay

ดินเผา · ค่าเริ่มต้น

Navy

กรมท่า

Amber

ส้มอำพัน

Forest

เขียวป่า

Teal

เขียวฟ้า

Mono

ดำ-ขาว

accent

ใช้น้อยมาก · แถบ/ลิงก์/active

ink

ตัวหนังสือหลัก

surface

พื้นหลังหน้า

card

พื้นการ์ด/ตาราง

ตัวอักษร

สองฟอนต์เท่านั้น — หัวข้อกับตัวเลขใช้ Bai Jamjuree เนื้อความใช้ Anuphan

Bai Jamjuree · หัวข้อ & ตัวเลข

รอบพรีออเดอร์ที่ 43

สรุปสินค้าที่ต้องสั่งเข้า

฿94,250

น้ำหนัก 500 / 600 / 700 · ตัวเลขเปิด tabular-nums ให้หลักตรงกันทุกแถว

Anuphan · เนื้อความ

ลูกค้าทักเข้ามาที่ฮานะมิ พรีออเดอร์ แอดมินคีย์ออเดอร์จากในห้องแชทได้เลย

ข้อความรองใช้สี muted ขนาด 14 px และเว้นบรรทัดกว้างขึ้นเพื่อให้อ่านภาษาไทยยาว ๆ ได้สบายตา

ข้อความประกอบเล็กสุดใช้สี faint ขนาด 12 px

ปุ่ม

ปุ่มหลักสีเข้มมีได้หน้าละ 1 ปุ่มเท่านั้น ที่เหลือเป็นปุ่มเส้นบาง

ทุกปุ่มที่เป็นการบันทึก/ส่ง/พิมพ์ ใส่ data-toast เพื่อเด้งข้อความยืนยัน — กดปุ่มด้านบนดูได้

ป้ายสถานะ & ชิป

ป้ายทุกใบใส่ whitespace-nowrap เสมอ เพราะภาษาไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ

ชำระครบแล้ว รอแพ็ค ค้างเกิน 1 วัน LINE OA ปิดรอบแล้ว
รอบที่ 43 กำลังเปิด สรุปสั่งเข้าอัตโนมัติ นับสต๊อกตามรอบ
บอทเปิด บอทเงียบ บอทปิด

การ์ดตัวเลข (KPI)

แถบสีบางบนหัวการ์ดบอกว่าเรื่องนี้ปกติ ต้องระวัง หรือแย่ — วางแถวละไม่เกิน 5 ใบ

ยอดขาย 30 วันย้อนหลัง
฿428,600
8 ส.ค. – 7 ก.ย. 2569 · 312 ออเดอร์
ยอดจองรอบ 43
฿94,250
จาก 68 ออเดอร์
ออเดอร์รอแพ็ค
24
ค้างเกิน 1 วัน 6 ออเดอร์
สินค้าใกล้หมด
3
ต้องสั่งเข้ารอบหน้า

ตาราง

หัวคอลัมน์ตัวเลขต้อง text-right ให้ตรงกับช่องข้อมูล และครอบด้วย overflow-x-auto เสมอเพื่อไม่ให้ล้นบนมือถือ

รหัสสินค้าหมวดราคาขายคงเหลือสถานะ
SK-001 เซรั่ม COSRX Snail 96สกินแคร์ ฿49034 พอขาย
SK-002 มาส์กแผ่น Mediheal N.M.Fสกินแคร์ ฿29012 ใกล้หมด
SN-001 ขนม Honey Butter Chipขนม ฿895 ต่ำกว่าจุดสั่งซื้อ

ช่องกรอกข้อมูล

ฟอร์มทุกตัวเป็นหน้าเต็มที่มี URL ของตัวเอง ไม่ใช้กล่องเด้ง

บาท

แถบความคืบหน้า & กล่องข้อความ

แถบใช้บอกสัดส่วน กล่องใช้บอกเรื่องที่ต้องรู้ทันที

เก็บมัดจำรอบ 4350%
คงเหลือ SK-002 เทียบจุดสั่งซื้อ80%
คงเหลือ SN-001 เทียบจุดสั่งซื้อ25%
เก็บมัดจำรอบที่ 42 ครบ 100% แล้ว
ยื่น ภ.พ.30 อีก 8 วัน
Honey Butter Chip เหลือ 5 ถุง ต่ำกว่าจุดสั่งซื้อ
ข้อความเข้าวันนี้ 156 · บอทตอบเองได้ 58%

ไอคอน อวาตาร์ และขั้นตอน

ไอคอนใช้ lucide ทั้งหมด ไม่มี emoji ที่ไหนในระบบ

พ ก ต
1

เปิดรอบ

ตั้งวันเปิด-ปิด เลือกสินค้า ตั้งมัดจำ

2

รับจองในแชท

คีย์ออเดอร์จากห้องแชท เก็บมัดจำ

กรอบหน้าจอจำลอง

ใช้แทนภาพสกรีนช็อตในหน้าเล่าเรื่อง ไม่ใช้รูปจากอินเทอร์เน็ตเลย

ตัวอย่างหน้าจอ

ที่ว่างรูปภาพใช้พื้นเทาอ่อนกับไอคอน ไม่ลิงก์รูปจากข้างนอก

กติกาที่ยึดทุกหน้า

ทำตามนี้แล้วหน้าใหม่จะกลืนกับของเดิมโดยไม่ต้องมาไล่แก้ทีหลัง

ไม่มี emoji ในหน้าจอ

ใช้ไอคอน lucide อย่างเดียว เพราะ emoji แสดงผลไม่เหมือนกันในแต่ละเครื่องและดูไม่เป็นระบบงาน

ฟอร์มเป็นหน้าเต็มมี URL

กล่องเด้งเก็บไว้ใช้แค่ยืนยันปุ่มเดียว เพราะฟอร์มในกล่องเด้งกรอกยากบนมือถือและกดแชร์ลิงก์ไม่ได้

ป้ายสถานะห้ามตกบรรทัด

ใส่ whitespace-nowrap ทุกใบ ไม่งั้นคำไทยจะโดนตัดกลางคำเวลาจอแคบ

ตัวเลขชิดขวาและหลักตรงกัน

ทุกจำนวนและจำนวนเงินใส่ class num หัวคอลัมน์ใส่ text-right ให้ตรงกับช่องข้อมูล ไล่สายตาลงมาแล้วเทียบยอดได้ทันที

ปุ่มหลักหน้าละหนึ่ง

หน้าหนึ่งควรบอกได้ว่า "สิ่งที่ต้องทำต่อคืออะไร" ถ้ามีปุ่มเข้มหลายปุ่มก็ไม่มีปุ่มไหนเด่น

พื้นขาว เส้นบาง สีน้อย

สี accent เก็บไว้ใช้เฉพาะจุดที่ต้องการให้มอง ที่เหลือปล่อยให้เนื้อหาเป็นพระเอก