SIGYA Premium Card Carousel

เจ้าของผลงานเล่าไว้แบบนี้

https://anin-pricetag-qrcode.vercel.app # 💎 SIGYA Premium Card Carousel - ระบบพิมพ์ป้ายราคาแบบพรีเมียม ระบบพิมพ์ป้ายราคาและบาร์โค้ดสำหรับร้านยา ด้วย **Design 7: Card Carousel Premium** สไตล์หรูหรา สีทอง-ครีม เหมาะกับร้านยาระดับพรีเมียม --- ## ✨ คุณสมบัติเด่น ### 🎨 ดีไซน์พรีเมียม - **สีสัน**: ทอง (#d4af37) + ครีม (#faf8f5) + น้ำตาล (#2d2a26) - **Typography**: Playfair Display (หัวข้อ) + Inter (เนื้อหา) - **สไตล์**: Luxury E-commerce Card Design - **Responsive**: รองรับทุกขนาดหน้าจอ ### 🚀 ฟังก์ชันครบครัน - ✅ อัพโหลด CSV จาก POS - ✅ ค้นหาสินค้า (SKU, บาร์โค้ด, ชื่อ) - ✅ กรองตามหมวดหมู่ - ✅ เลือกสินค้าแบบการ์ด - ✅ จัดการจำนวนป้าย - ✅ แสดงตัวอย่างก่อนพิมพ์ - ✅ พิมพ์ป้ายขนาด 4.5×4 cm - ✅ สร้างบาร์โค้ด CODE128 อัตโนมัติ ### 📊 สถิติแบบเรียลไทม์ - จำนวนสินค้าทั้งหมด - รายการที่เลือก - ป้ายที่จะพิมพ์ - ผลการค้นหา --- ## 🚀 วิธีติดตั้งและใช้งาน ### 1. ติดตั้ง Dependencies ```bash npm install ``` หรือใช้ yarn: ```bash yarn install ``` ### 2. เริ่มต้นใช้งาน ```bash npm run dev ``` โปรแกรมจะเปิดที่: `http://localhost:3000` ### 3. Build สำหรับ Production ```bash npm run build ``` ไฟล์ที่ build แล้วจะอยู่ในโฟลเดอร์ `dist/` --- ## 📁 โครงสร้างโปรเจค ``` pharmacy-premium/ ├── src/ │ ├── App.tsx # Component หลัก │ ├── App.css # Premium Card Carousel Styles │ ├── main.tsx # Entry point │ └── index.css # Global styles + Fonts ├── package.json # Dependencies ├── tsconfig.json # TypeScript config ├── vite.config.ts # Vite config └── index.html

โดย it-anin · ดูโพสต์ต้นทาง