Postiz Media Manager

# คู่มือการใช้งาน Web UI - Postiz Media Manager ## ภาพรวม Web UI ให้คุณจัดการ media ใน Postiz ผ่านหน้าเว็บที่ใช้งานง่าย โดยไม่ต้องใช้ MCP Client ## คุณสมบัติหลัก ✅ **แดชบอร์ดแสดงสถิติ** - Media ทั้งหมด, ปลอดภัย, ไม่ใช้งาน ✅ **กรองตามช่วงวันที่** - เลือกวันที่เริ่มต้น-สิ้นสุด ✅ **กรองตามประเภท** - ทั้งหมด, ไม่ใช้งาน, ในโพสต์ที่ลงแล้ว ✅ **เลือก Media หลายไฟล์** - เลือกทีละไฟล์หรือทั้งหมด ✅ **ลบ Media ปลอดภัย** - ป้องกันลบ media ที่ใช้ในโพสต์อนาคต ✅ **ยืนยันก่อนลบ** - Modal ยืนยันเพื่อป้องกันความผิดพลาด ## การติดตั้งและรัน ### 1. ติดตั้ง Dependencies (ถ้ายังไม่ได้ทำ) ```bash npm install ``` ### 2. ตั้งค่า Environment Variables แก้ไขไฟล์ `.env` (หรือสร้างจาก `.env.example`): ```env POSTIZ_BASE_URL=https://api.postiz.app POSTIZ_API_TOKEN=your_token_here PORT=3000 ``` **หมายเหตุ:** คุณใส่ token ไว้ที่ `.env.example` แล้ว แต่ควรสร้างไฟล์ `.env` แยกเพื่อความปลอดภัย ### 3. Build โปรเจกต์ ```bash npm run build ``` ### 4. เริ่ม Web Server ```bash npm run web ``` ### 5. เปิดเว็บบราวเซอร์ เปิด: **http://localhost:3000** คุณจะเห็นหน้า Web UI พร้อมใช้งาน! --- ## การใช้งาน Web UI ### 📊 หน้าแดชบอร์ด เมื่อเปิดหน้าเว็บ คุณจะเห็น: 1. **Stats Cards** (แถบบนสุด): - **Media ทั้งหมด** - จำนวน media ทั้งหมดในระบบ - **Media ที่ปลอดภัย** - media ที่ใช้ในโพสต์อนาคต (draft/scheduled/queued) - **Media ไม่ใช้งาน** - media ที่ไม่ได้ใช้ในโพสต์อนาคต - **เลือกแล้ว** - จำนวน media ที่เลือกเพื่อลบ ### 🔍 ตัวกรอง **ประเภท:** - **ทั้งหมด** - แสดง media ทั้งหมด - **Media ไม่ใช้งาน** - แสดงเฉพาะ media ที่ไม่ได้ใช้ในโพสต์อนาคต (orphans) - **Media ในโพสต์ที่ลงแล้ว** - แสดงเฉพาะ media ที่ใช้ในโพสต์ที่โพสต์ไปแล้ว **วันที่:** - **วันที่เริ่มต้น** - กรอง media ที่สร้างหลังวันที่นี้ - **วันที่สิ้นสุด** - กรอง media ที่สร้างก่อนวันที่นี้ (ค่าเริ่มต้น: วันนี้) **ตัวอย่างการใช้งาน:** 1. ดู media ไม่ใช้งานที่สร้างในเดือนนี้: - เลือกประเภท: "Media ไม่ใช้งาน" - วันที่เริ่มต้น: วันแรกของเดือน - วันที่สิ้นสุด: วันนี้ - กดปุ่ม "กรอง" 2. ดู media ในโพสต์ที่ลงไปแล้ว: - เลือกประเภท: "Media ในโพสต์ที่ลงแล้ว" - กดปุ่ม "กรอง" ### 📋 การเลือก Media **วิธีเลือก:** 1. **เลือกทีละไฟล์** - คลิกที่การ์ด media 2. **เลือกทั้งหมด** - กดปุ่ม "เลือกทั้งหมด" (เลือกเฉพาะที่ไม่ปลอดภัย) 3. **ยกเลิกทั้งหมด** - กดปุ่ม "ยกเลิกทั้งหมด" **Badge สถานะ:** - 🟢 **ปลอดภัย** (สีเขียว) - media ใช้ในโพสต์อนาคต ไม่สามารถเลือกหรือลบได้ - 🟠 **ไม่ใช้งาน** (สีส้ม) - media ไม่ได้ใช้ในโพสต์อนาคต สามารถลบได้ ### 🗑️ การลบ Media **ขั้นตอนการลบ:** 1. เลือก media ที่ต้องการลบ (คลิกที่การ์ด) 2. กดปุ่ม **"ลบที่เลือก (X)"** ด้านบน 3. ระบบจะแสดง **Modal ยืนยัน** พร้อมจำนวน media ที่จะลบ 4. ⚠️ **อ่านคำเตือน** - การลบไม่สามารถย้อนกลับได้! 5. กดปุ่ม **"ยืนยันลบ"** เพื่อลบจริง หรือ **"ยกเลิก"** เพื่อยกเลิก 6. ระบบจะแสดงผลลัพธ์: - ลบสำเร็จกี่ไฟล์ - ล้มเหลวกี่ไฟล์ (พร้อมเหตุผล) **การป้องกัน:** - ❌ **ไม่สามารถเลือก** media ที่มี badge "ปลอดภัย" - ❌ **ไม่สามารถลบ** media ที่ใช้ในโพสต์อนาคต (draft/scheduled/queued) - ✅ **ลบได้เฉพาะ** media ที่ไม่ได้ใช้ในโพสต์อนาคต --- ## 💡 Use Cases ### Use Case 1: ลบ Media ไม่ใช้งานทั้งหมด ``` 1. เลือกประเภท: "Media ไม่ใช้งาน" 2. กดปุ่ม "กรอง" 3. กดปุ่ม "เลือกทั้งหมด" 4. กดปุ่ม "ลบที่เลือก" 5. ยืนยันการลบ ``` ### Use Case 2: ลบ Media เก่าที่ไม่ใช้งาน ``` 1. เลือกประเภท: "Media ไม่ใช้งาน" 2. วันที่เริ่มต้น: (เว้นว่าง) 3. วันที่สิ้นสุด: เดือนที่แล้ว 4. กดปุ่ม "กรอง" 5. เลือก media ที่ต้องการลบ 6. กดปุ่ม "ลบที่เลือก" ``` ### Use Case 3: ตรวจสอบ Media ในโพสต์ที่ลงแล้ว ``` 1. เลือกประเภท: "Media ในโพสต์ที่ลงแล้ว" 2. เลือกช่วงวันที่ที่ต้องการดู 3. กดปุ่ม "กรอง" 4. ดูรายการ media (ไม่ต้องลบ) ``` ### Use Case 4: ลบ Media ทีละน้อย ``` 1. เลือกประเภท: "Media ไม่ใช้งาน" 2. กดปุ่ม "กรอง" 3. เลือก media ที่ต้องการลบ 5-10 ไฟล์ 4. กดปุ่ม "ลบที่เลือก" 5. ทำซ้ำจนกว่าจะครบ ``` --- ## 🔐 ความปลอดภัย ### การป้องกันการลบผิดพลาด: 1. **Protected Media Detection** - ตรวจจับ media ที่ใช้ในโพสต์อนาคตอัตโนมัติ 2. **Visual Indicators** - Badge แสดงสถานะชัดเจน 3. **Disable Selection** - ไม่สามารถเลือก protected media ได้ 4. **Confirmation Modal** - ยืนยันก่อนลบทุกครั้ง 5. **Delete Result Report** - แสดงผลลัพธ์ละเอียด ### Best Practices: ✅ **ตรวจสอบ Badge** ก่อนเลือก - เลือกเฉพาะที่มี badge "ไม่ใช้งาน" ✅ **ทดสอบก่อน** - เริ่มลบทีละน้อยในครั้งแรก ✅ **ดู Stats** - ติดตาม stats ก่อนและหลังลบ ✅ **Backup ข้อมูล** - สำรอง Postiz ก่อนลบครั้งแรก --- ## 🛠️ การแก้ไขปัญหา ### ปัญหา: Web UI ไม่เปิด **แก้ไข:** 1. ตรวจสอบว่ารัน `npm run web` แล้ว 2. ตรวจสอบว่า port 3000 ไม่ถูกใช้งาน 3. เปลี่ยน port ใน `.env`: `PORT=3001` ### ปัญหา: แสดงข้อผิดพลาด API **แก้ไข:** 1. ตรวจสอบ `.env` ว่าใส่ `POSTIZ_BASE_URL` และ `POSTIZ_API_TOKEN` ถูกต้อง 2. ตรวจสอบว่า API endpoints ใน `src/postizClient.ts` ถูกต้อง 3. ดู console log เพื่อหาข้อผิดพลาด ### ปัญหา: Media ไม่แสดง **แก้ไข:** 1. กดปุ่ม "รีเฟรช" มุมขวาบน 2. ล้างตัวกรอง (กด "ล้างตัวกรอง") 3. ตรวจสอบว่ามี media จริงใน Postiz ### ปัญหา: ลบไม่สำเร็จ **แก้ไข:** 1. ตรวจสอบว่า API token มีสิทธิ์ลบ 2. ตรวจสอบว่า media ยังไม่ถูกลบไปแล้ว 3. ดูรายละเอียดใน "รายการที่ล้มเหลว" ใน result modal --- ## 🎨 UI Components ### Stats Cards แสดงสถิติรวม 4 การ์ด: - Media ทั้งหมด (สีน้ำเงิน) - Media ที่ปลอดภัย (สีเขียว) - Media ไม่ใช้งาน (สีส้ม) - เลือกแล้ว (สีน้ำเงิน) ### Media Cards แต่ละ media แสดงเป็นการ์ดที่มี: - รูปภาพ preview (ถ้ามี) - Badge สถานะ (ปลอดภัย/ไม่ใช้งาน) - ชื่อไฟล์ - วันที่สร้าง - ขนาดไฟล์ - Media ID ### Modals - **Delete Confirmation Modal** - ยืนยันการลบ - **Result Modal** - แสดงผลลัพธ์ --- ## 🚀 การพัฒนาต่อ หากต้องการปรับแต่ง UI: 1. **แก้ HTML:** `public/index.html` 2. **แก้ CSS:** แก้ใน `<style>` ของ `index.html` หรือสร้างไฟล์ CSS แยก 3. **แก้ JavaScript:** `public/app.js` 4. **แก้ Backend API:** `src/webServer.ts` หลังแก้ไขให้: ```bash npm run build # ถ้าแก้ .ts files npm run web # รัน server ใหม่ ``` --- ## 📝 สรุป Web UI นี้ให้คุณ: - ✅ ดูรายการ media ทั้งหมด - ✅ กรองตามวันที่และประเภท - ✅ เลือก media หลายไฟล์ - ✅ ลบ media อย่างปลอดภัย - ✅ ป้องกันลบ media ที่ใช้ในโพสต์อนาคต **เริ่มใช้งาน:** ```bash npm run web # เปิดเว็บบราวเซอร์: http://localhost:3000 ``` สนุกกับการจัดการ media ใน Postiz! 🎉