# ปรับหน้าติดตามแบบให้แผนที่เป็นพื้นที่หลัก

> **ปรับตามคำขอล่าสุด:** คืนเมนูชื่อเต็มทุกหน้า เปิดรายละเอียดอุปกรณ์ ลำดับเหตุ กราฟ และรายการจุดไว้แล้ว เพิ่มคำอธิบาย P0–P3 ว่าอยู่ที่ไหน เชื่อมใคร ทำอะไร พร้อมเส้นเชื่อมและป้ายชื่อบนฉาก ลดแถบเมนูเหลือ 188 พิกเซลและแผงรายละเอียด 250 พิกเซล เนื้อหาด้านล่างบันทึกการตรวจรอบก่อนหน้าซึ่งเคยเริ่มแบบย่อ


15 ตุลาคม 2569 · SALA HUM POWERGUARD

## สิ่งที่เปลี่ยน

- เมนูไอคอนกว้าง 72 พิกเซล ยืดเป็น 232 พิกเซลได้ มีชื่อสำหรับตัวอ่านหน้าจอและป้ายเมื่อวางเมาส์/โฟกัส ทุกเส้นทางเดิมยังอยู่
- แถบบนแสดงสถานที่ สถานะไฟ ป้ายข้อมูลจำลอง แจ้งเตือน และโหมดผู้ใช้ เก็บตั้งค่าเสียงไว้ท้ายหน้า
- KPI สามรายการอยู่เหนือฉากในพื้นที่ของตัวเอง ไม่ทับแผนที่
- รายละเอียดอุปกรณ์ปิดตอนเริ่ม เลือกเครื่องจึงเปิด แผงข้างบนคอมพิวเตอร์และแผงล่างบนมือถือใช้พื้นที่ในโครงหน้า ไม่วางทับฉาก
- กล้องเล็งจุดที่เลือกและปรับตามขนาดพื้นที่แสดงผล ปิดแผงหรือกด Escape แล้วคืนมุมและโฟกัส
- จุดอุปกรณ์ย่อเป็นหมุด ชื่อเปิดเมื่อชี้ โฟกัส หรือเลือก มีรายการอุปกรณ์แบบกางได้เป็นอีกทางเลือก
- รวมซูม คืนกล้อง มุมมอง คุณภาพ/หมุน และเต็มจอในแถบเดียว ผังสองมิติยังใช้ได้
- ลำดับเหตุเริ่มแบบย่อ กดดูขั้นและเหตุย่อยได้ มาสคอตเริ่มเป็นปุ่มเล็กและไม่เปิดข้อความเอง
- แยกหน้าโหมดสาธิตออกจากหน้าดูสถานะทั่วไป ปุ่มไฟปกติ ไฟตก ไฟดับ สำรอง แบตต่ำ และคืนไฟใช้ store เดิม
- แจ้งเตือนในหน้าแผนที่เป็นแถวของตัวเอง กดรับทราบ/ดูรายละเอียด/ปิดได้ รายการประวัติไม่ถูกลบ หน้าด้านอื่นคงรูปแบบแจ้งเตือนเดิม
- กราฟในภาพรวมติดตั้งเมื่อเปิดรายละเอียด เพื่อลดงานที่ไม่จำเป็น ปุ่มและส่วนควบคุมใช้ไทย ชื่อชิ้นส่วน หน่วย ขา และคีย์ข้อมูลมาตรฐานยังคงไว้ตามความหมายทางวิศวกรรม

## โค้ดหลัก

| ไฟล์ | หน้าที่ |
| --- | --- |
| `src/components/Platform.tsx` | เมนู แถบบน เส้นทางและการเข้าหน้าสาธิต |
| `src/components/powerguard/IsometricDashboard.tsx` | โครง KPI/แผนที่/แผงรายละเอียดและสถานะย่อ |
| `src/components/powerguard/MapWorkspace.tsx` | ส่วนใช้ซ้ำ: เครื่องมือกล้อง รายละเอียดอุปกรณ์ แถวเหตุ และแถวแจ้งเตือน |
| `src/components/Scene3D.tsx` | หมุดย่อ การเลือก และกล้องตามขนาดพื้นที่ |
| `src/components/powerguard/Runtime.tsx` | คงการเก็บเหตุ/เสียงเดิม ย้ายการแสดงแจ้งเตือนเฉพาะหน้าแผนที่ |
| `src/components/powerguard/CitizenPages.tsx` | เอาปุ่มสาธิตออกจากหน้าดูไฟและแจ้งเตือน |
| `src/components/powerguard/SeaBassAssistant.tsx` | ผู้ช่วยแบบย่อที่เปิดเมื่อกด |
| `src/styles/isometric-dashboard.css` | โครง responsive ใหม่แทนการวางกล่องลอยเดิม |
| `src/lib/view-modes.ts`, `src/lib/model.ts`, ส่วนแสดงวงจร/พื้นที่/ไกด์ | แปลป้ายแสดงผล รักษา id/สมการ/สถานะเดิม |
| `DESIGN.md`, `PRODUCT.md` | ขอบเขตและวิธีใช้โครงใหม่ |

ไม่สร้าง store หรือตัวจำลองซ้ำ ไม่เปลี่ยนสมการแบตเตอรี่และลำดับ P0–P3 การแก้ `model.ts` จำกัดที่ข้อความอุปกรณ์

## ตรวจด้วยเบราว์เซอร์จริง

ใช้ CUA กับ static production export บน localhost:3013

| รายการ | ผล |
| --- | --- |
| จอ 1440 / 1024 / 768 / 390 | ไม่มีเนื้อหาล้นแนวนอน |
| KPI | ขอบล่างอยู่เหนือขอบบน canvas ทุกขนาดที่ตรวจ |
| ค่าเริ่มต้น | ไม่มี inspector / ลำดับเหตุย่อ / ไม่มีปุ่มสั่งสถานการณ์ในภาพรวม |
| หมุด | เลือกครบศูนย์ไฟ จุดกระชัง บ้าน/อุปกรณ์จำเป็น และเครื่องใช้ทั่วไป |
| แผงข้าง | Canvas จบที่ขอบซ้ายแผง ไม่ทับกัน ใช้ canvas เดียว |
| มือถือ | แผงเริ่มใต้ canvas และแถบเครื่องมือ มีปุ่มปิดและส่วนอ่านเลื่อนเอง |
| แป้นพิมพ์ | Escape ปิดแผงได้ โฟกัสคืนจุดเดิม |
| กล้อง | ซูม มุมบน/เฉียง ผังสองมิติ เต็มจอและออกเต็มจอเปิดใช้ได้ |
| เมนู | ย่อ/ขยาย 72/232 พิกเซล เมนูมือถือเปิดและปิดได้ |
| เหตุ | หยุดเวลาแล้วกดไฟดับ KPI เป็นไฟดับ/สำรอง หมุดเครื่องทั่วไปหยุด แจ้งเตือนและมาสคอตตอบสนอง |
| แบตต่ำ / คืนไฟ | แสดง 34% จำลอง และคืนไฟหลักโดยรักษาพลังงานแบตตาม store เดิม |
| แจ้งเตือนมือถือ | ไม่มี floating toast บนหน้าแผนที่ แถวแจ้งเตือนอยู่เหนือ KPI/ฉาก |
| วงจรเดิม | เปิดมุมแยกชิ้นส่วนและผังวงจรได้ |
| ข้อมูลเดิม | เปิดหน้ากราฟ/แจ้งเตือนและหน้าตั้งค่าเสียงได้ ไม่พบ console error ในการตรวจเส้นทางหลัก |
| เส้นทาง static | 19 หน้า HTTP 200 ดู `route-checks.json` เป็นการตรวจการเสิร์ฟหน้า ไม่ใช่คลิกทุกปุ่มทุกหน้า |

ตรวจภาพเดสก์ท็อปและมือถือเป็นชุด แก้แจ้งเตือนบังกล้อง/ป้ายข้อมูลจำลองบนมือถือ แล้วตรวจยืนยันอีกครั้ง ภาพอยู่ใน `screenshots/` ไฟล์ before เป็นรุ่นเดิมก่อนปรับ

## ชุดตรวจอัตโนมัติ

- `pnpm typecheck`
- `pnpm test`: ชุดทดสอบเดิม 52 ข้อ ครอบคลุมแบตเตอรี่ วงจร การกู้คืน เหตุแจ้งเตือน ความพร้อมของเซนเซอร์ และ persistence
- `pnpm export:github`: production build พร้อม basePath และคัดออกสู่ `energy-platform/`
- ไม่แก้ข้อสอบเดิมให้ผ่าน และไม่ใช้จำนวนข้อสอบแทนหลักฐานฮาร์ดแวร์

บันทึกคำสั่งฉบับเต็มอยู่ใน `.codex-build/ux-refactor/` ของเครื่องทำงาน

## ข้อจำกัด

- ยังเป็นตัวจำลองในเบราว์เซอร์ ไม่มี backend/telemetry จากอุปกรณ์จริง ไม่มีผลติดตั้งหรือผลกระทบภาคสนามที่ยืนยัน
- ฉากเป็นการสร้างอิงภาพ ตำแหน่งอุปกรณ์เป็นข้อเสนอ ค่าความลึก น้ำและอากาศยังสังเคราะห์ ไม่มีค่า DO ที่วัดจริง
- การรับทราบ บันทึกและแผนสำรองอยู่ในเครื่อง ไม่ส่งหน่วยงานและไม่ซิงก์หลายคน
- ทดสอบเต็มจอในเบราว์เซอร์ที่ใช้งานนี้ อุปกรณ์ที่ไม่รองรับ Fullscreen API ใช้การขยายภายในหน้า ต้องทดสอบเครื่องปลายทางเพิ่มเติม
- ไม่ได้วัด FPS/Core Web Vitals หรือทดสอบทุก GPU และยังไม่ใช่การรับรองการเข้าถึงโดยผู้ใช้โปรแกรมอ่านหน้าจอจริง
- ชื่อขา ชิ้นส่วน คีย์ JSON และหน่วยมาตรฐานในเอกสารวิศวกรรมคงไว้เพื่อไม่ทำให้ข้อมูลเทคนิคผิดความหมาย
- Pitch 10 หน้าเดิมคงเป็นไฟล์จากรอบก่อนปรับ UX ภาพบนสไลด์จึงเป็นรุ่นก่อนหน้า ไม่อ้างว่าเป็น screenshot รุ่นนี้