798 lines
53 KiB
TypeScript
798 lines
53 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
Sparkles,
|
|
Copy,
|
|
Check,
|
|
X,
|
|
BookOpen,
|
|
Flower2,
|
|
Sparkle,
|
|
Shirt,
|
|
Wrench,
|
|
Code2,
|
|
CheckCircle2,
|
|
Layers,
|
|
Globe2
|
|
} from 'lucide-react'
|
|
|
|
interface ProductJsonGuideModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onOpenImport?: () => void
|
|
}
|
|
|
|
const GUIDE_OVERVIEW_MARKDOWN = `# คู่มือการใช้ AI/LLM สร้าง JSON สำหรับนำเข้าสินค้า (Product Catalog Generator)
|
|
|
|
ระบบรองรับการสร้างสินค้าจำนวนมากผ่าน **JSON Import** ในหน้า Admin (/admin/products -> คลิกปุ่ม "Import JSON") หรือเรียก API POST /api/products/bulk
|
|
|
|
---
|
|
|
|
## 🛠️ ข้อกำหนดทางเทคนิคสากล (Universal Schema Rules)
|
|
|
|
ไม่ว่าจะใช้ไฟล์หรือหมวดหมู่ใด LLM จะต้องยึดหลักเกณฑ์ทางเทคนิคของระบบดังนี้:
|
|
|
|
1. Format: ต้องส่งคืนเฉพาะ Valid JSON Array ([ ... ]) ล้วนๆ ไม่มีข้อความเกริ่นหรือปิดท้าย
|
|
2. Numeric Fields: price, stock, order ต้องเป็นตัวเลข Number แท้จริง (ห้ามครอบเครื่องหมายคำพูด เช่น "1500")
|
|
3. Product Types:
|
|
- Simple Product (สินค้าเดี่ยว): ใส่ price, stock, sku, barcode ที่ระดับบนสุด ระบบจะแปลงเป็น Base Variant ในฐานข้อมูลให้อัตโนมัติ
|
|
- Variable Product (สินค้ามีตัวเลือก ไซส์/สี/ขนาด): กำหนด options (เช่น [{"name": "ขนาด", "values": ["S", "M"]}]) และใน variants ต้องมี option1 ตรงกับค่าใน values ทุกตัวอักษร
|
|
4. Multilingual (รองรับครบ 8 ภาษา): ระบบรองรับการแปลภาษาผ่านฟิลด์ translations ครบทั้ง 8 ภาษามาตรฐานของระบบ:
|
|
- th (ไทย - ภาษาหลัก)
|
|
- en (English - สากล)
|
|
- ja (日本語 - ญี่ปุ่น)
|
|
- zh (简体中文 - จีนตัวย่อ)
|
|
- vi (Tiếng Việt - เวียดนาม)
|
|
- ko (한국어 - เกาหลี)
|
|
- lo (ພາສາລາວ - ลาว)
|
|
- it (Italiano - อิตาลี)
|
|
ในแต่ละภาษากำหนด name, description, details ให้สอดคล้องกัน
|
|
5. Images: กำหนดเป็น Array ของ URL รูปภาพจริง เช่น จาก Unsplash หรือ CDN
|
|
|
|
---
|
|
|
|
## 🚀 ขั้นตอนการนำเข้าข้อมูล (Import Workflow)
|
|
|
|
1. เลือกแท็บหมวดธุรกิจที่ต้องการ แล้วกดปุ่ม "Copy Prompt"
|
|
2. ส่งให้ LLM เช่น ChatGPT, Claude 3.5 Sonnet หรือ Google Gemini
|
|
(สามารถระบุจำนวนสินค้าที่ต้องการเพิ่มเติมได้ เช่น "ขอ 20 รายการ")
|
|
3. คัดลอกผลลัพธ์ JSON ที่ได้จาก LLM
|
|
4. คลิกปุ่ม "เปิดหน้าต่าง Import JSON" -> วางโค้ด JSON -> กดยืนยันนำเข้าสินค้า`
|
|
|
|
const WELLNESS_PROMPT = `คุณคือ Senior E-commerce Catalog Specialist และ Luxury Brand Copywriter ระดับสากล เชี่ยวชาญสินค้ากลุ่ม Luxury Wellness, Organic Aromatherapy, Fine Fragrance และ Spa Lifestyle (ในระดับเทียบเคียงกับแบรนด์ Panpuri, Jo Malone, Diptyque, Aesop, HARNN)
|
|
|
|
[ภารกิจของคุณ]:
|
|
สร้างข้อมูลสินค้าสำหรับนำเข้าสู่ระบบ E-commerce ในรูปแบบ **Valid JSON Array** ตาม Schema ของระบบอย่างเคร่งครัด
|
|
|
|
[กฎและข้อกำหนดทางเทคนิค]:
|
|
1. ผลลัพธ์ต้องเป็น Valid JSON Array ล้วนๆ เริ่มต้นด้วย [ และจบด้วย ] เท่านั้น (ห้ามมีคำเกริ่นนำหรือคำลงท้าย)
|
|
2. ฟิลด์ตัวเลข (price, stock) ต้องเป็น Number เท่านั้น ห้ามใส่เครื่องหมายคำพูด (ห้ามเป็น String)
|
|
3. หมวดหมู่สินค้า (categoryName) ให้ใช้กลุ่มคำ เช่น:
|
|
- "Essential Oil & Extract"
|
|
- "Reed Diffuser"
|
|
- "Aromatic Candle"
|
|
- "Body & Bath Sanctuary"
|
|
- "Room & Linen Mist"
|
|
- "Hand & Nail Care"
|
|
4. แบรนด์ (brandName): กำหนดเป็นชื่อแบรนด์หรู เช่น "Panpuri", "Jo Malone London", "HomAroma Heritage", "Siam Botanicals"
|
|
5. รูปภาพ (images): ให้ใส่ Array ของ URL รูปภาพความละเอียดสูงจาก Unsplash ที่เกี่ยวข้องกับ Luxury Perfume, Candle, Essential Oil, Diffuser ที่เปิดดูได้จริง เช่น:
|
|
- "https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=800"
|
|
- "https://images.unsplash.com/photo-1617897903246-719242758050?w=800"
|
|
- "https://images.unsplash.com/photo-1605651202774-7d573fd3f12d?w=800"
|
|
- "https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?w=800"
|
|
6. การเขียน Copywriting:
|
|
- "description": ภาษาหรูหรา ถ่ายทอดอารมณ์ สัมผัส และการบำบัดจิตใจ (Aromachology)
|
|
- "details": ระบุ Scent Profile ละเอียด (Top Notes, Heart Notes, Base Notes), ปริมาตร/ขนาด, วิธีการใช้งาน, ส่วนผสมออร์แกนิก
|
|
7. การรองรับหลายภาษา (Multilingual):
|
|
ระบบรองรับครบ 8 ภาษาตาม Language Code สากล:
|
|
- "th": ภาษาไทย (ภาษาหลัก)
|
|
- "en": English (สากล)
|
|
- "ja": 日本語 (ญี่ปุ่น)
|
|
- "zh": 简体中文 (จีนตัวย่อ)
|
|
- "vi": Tiếng Việt (เวียดนาม)
|
|
- "ko": 한국어 (เกาหลี)
|
|
- "lo": ພາສາລາວ (ลาว)
|
|
- "it": Italiano (อิตาลี)
|
|
ในฟิลด์ "translations" ให้สร้าง Object สำหรับแต่ละรหัสภาษาที่มี "name", "description", "details" แปลอย่างเป็นธรรมชาติ สละสลวย ตรงกับบริบทสินค้า
|
|
8. โครงสร้างประเภทสินค้า:
|
|
- สินค้าเดี่ยว (Simple): ระบุ price, stock, sku, barcode ที่ระดับบนสุด
|
|
- สินค้ามีตัวเลือกย่อย (Variable เช่น ขนาด 10ml, 50ml, 100ml หรือกลิ่น): ต้องมี "options" และ "variants" ที่ค่า option1 ตรงกันทุกตัวอักษร
|
|
|
|
[ตัวอย่างรูปแบบ JSON ที่ต้องการ]:
|
|
[
|
|
{
|
|
"name": "น้ำมันหอมระเหยบริสุทธิ์ ไซมีส วอเตอร์ 100% Pure Essential Oil",
|
|
"categoryName": "Essential Oil & Extract",
|
|
"brandName": "Panpuri",
|
|
"description": "กลิ่นหอมอันเป็นเอกลักษณ์ที่ผสานความหอมละมุนของดอกมะลิหลวง กระดังงา และสะระแหน่ มอบความสดชื่น ผ่อนคลาย และฟื้นฟูจิตใจให้สงบสมดุล",
|
|
"details": "• Scent Profile: Floral, Exotic, Uplifting\\n• Top Notes: Italian Bergamot, Crisp Mint\\n• Heart Notes: Royal Thai Jasmine, Organic Ylang Ylang\\n• Base Notes: Warm Sandalwood, Siam Benzoin\\n• วิธีใช้: หยด 4-6 หยดลงในเครื่องพ่นอโรมา หรืออ่างอาบน้ำ\\n• ขนาด: 10ml, 30ml",
|
|
"options": [
|
|
{
|
|
"name": "ขนาด",
|
|
"values": ["10ml", "30ml"]
|
|
}
|
|
],
|
|
"variants": [
|
|
{
|
|
"option1": "10ml",
|
|
"price": 1250,
|
|
"stock": 40,
|
|
"sku": "PP-SW-10ML",
|
|
"barcode": "8859210010011"
|
|
},
|
|
{
|
|
"option1": "30ml",
|
|
"price": 2650,
|
|
"stock": 25,
|
|
"sku": "PP-SW-30ML",
|
|
"barcode": "8859210010028"
|
|
}
|
|
],
|
|
"images": [
|
|
"https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=800",
|
|
"https://images.unsplash.com/photo-1617897903246-719242758050?w=800"
|
|
],
|
|
"translations": {
|
|
"th": {
|
|
"name": "น้ำมันหอมระเหยบริสุทธิ์ ไซมีส วอเตอร์ 100% Pure Essential Oil",
|
|
"description": "กลิ่นหอมอันเป็นเอกลักษณ์ที่ผสานความหอมละมุนของดอกมะลิหลวง กระดังงา และสะระแหน่ มอบความผ่อนคลายและสมดุลแห่งจิตใจ",
|
|
"details": "• กลิ่น: มะลิหลวง, กระดังงา, มิ้นต์สด\\n• ปริมาตร: 10ml, 30ml\\n• ธรรมชาติ 100% ไม่แต่งกลิ่นสังเคราะห์"
|
|
},
|
|
"en": {
|
|
"name": "Siamese Water 100% Pure Essential Oil Blend",
|
|
"description": "Signature scent blending sensual Royal Jasmine, Exotic Ylang Ylang, and refreshing Peppermint to inspire serenity.",
|
|
"details": "• Scent: Royal Jasmine, Ylang Ylang, Fresh Peppermint\\n• Sizes: 10ml, 30ml\\n• 100% Pure Natural Essential Oil Blend"
|
|
},
|
|
"ja": {
|
|
"name": "サイアミーズ ウォーター 100% ピュア エッセンシャルオイル",
|
|
"description": "タイ王室のジャスミン、イランイラン、ミントが織りなす上質で穏やかな癒しの香り。",
|
|
"details": "• 香調: フローラル、リラクゼーション\\n• 容量: 10ml / 30ml\\n• 100% 天然精油ブレンド"
|
|
},
|
|
"zh": {
|
|
"name": "暹罗之水 100% 纯天然复方精油",
|
|
"description": "融合皇家泰国茉莉、依兰依兰与清凉薄荷的招牌芬芳，舒缓身心，带来宁静祥和的安抚力量。",
|
|
"details": "• 香调: 芳醇花香调、清新宁神\\n• 规格: 10ml, 30ml\\n• 100% 纯天然植物萃取"
|
|
},
|
|
"vi": {
|
|
"name": "Tinh dầu nguyên chất Siamese Water 100%",
|
|
"description": "Hương thơm đặc trưng hòa quyện hoa nhài hoàng gia Thái, ngọc lan tây và bạc hà thanh mát, mang lại sự thư thái tuyệt đối.",
|
|
"details": "• Nốt hương: Hoa nhài, Ngọc lan tây, Bạc hà\\n• Dung tích: 10ml, 30ml\\n• 100% thiên nhiên"
|
|
},
|
|
"ko": {
|
|
"name": "샴 워터 100% 퓨어 에센셜 오일",
|
|
"description": "태국 로열 자스민, 일랑일랑, 상쾌한 페퍼민트가 어우러져 깊은 휴식과 마음의 평온을 선사하는 시그니처 향.",
|
|
"details": "• 향 노트: 자스민, 일랑일랑, 페퍼민트\\n• 용량: 10ml, 30ml\\n• 100% 천연 에센셜 오일"
|
|
},
|
|
"lo": {
|
|
"name": "ນ້ຳມັນຫອມລະເຫີຍ ໄຊຍາມີສ ວໍເຕີ 100% Pure Essential Oil",
|
|
"description": "ກິ່ນຫອມອັນເປັນເອກະລັກທີ່ຜະສານດອກມະລິຫຼວງ, ດອກກະດັງງາ ແລະ ໃບສະລະແໜ່ ໃຫ້ຄວາມຜ່ອນຄາຍຈິດໃຈ.",
|
|
"details": "• ກິ່ນ: ດອກມະລິ, ດອກກະດັງງາ, ມິ້ນ\\n• ຂະໜາດ: 10ml, 30ml"
|
|
},
|
|
"it": {
|
|
"name": "Siamese Water Olio Essenziale Puro 100%",
|
|
"description": "Fragranza iconica con Gelsomino Reale Thailandese, Ylang Ylang e Menta Piperita per favorire armonia e serenità.",
|
|
"details": "• Profilo Olfattivo: Gelsomino, Ylang Ylang, Menta\\n• Formati: 10ml, 30ml\\n• 100% puro e naturale"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
[คำสั่ง]:
|
|
กรุณาสร้างรายการสินค้ากลุ่ม Luxury Wellness ตามข้อกำหนดด้านบน จำนวน 8 รายการ โดยผสมผสานระหว่าง Reed Diffuser, Essential Oil, Scented Candle, Body Oil และ Room Spray ส่งผลลัพธ์เป็น Valid JSON Array เท่านั้น`
|
|
|
|
const BEAUTY_PROMPT = `คุณคือ Senior Beauty Merchandiser และ Cosmetics Catalog Specialist เชี่ยวชาญการจัดทำฐานข้อมูลสินค้าสำหรับร้านมัลติแบรนด์ความงามชั้นนำ เช่น EVEANDBOY, Beautrium, Sephora, Watsons
|
|
|
|
[ภารกิจของคุณ]:
|
|
สร้างข้อมูลสินค้าเครื่องสำอางและสกินแคร์สำหรับนำเข้าสู่ระบบ E-commerce ในรูปแบบ **Valid JSON Array** ตาม Schema ของระบบอย่างเคร่งครัด
|
|
|
|
[กฎและข้อกำหนดทางเทคนิค]:
|
|
1. ผลลัพธ์ต้องเป็น Valid JSON Array ล้วนๆ เริ่มต้นด้วย [ และจบด้วย ] เท่านั้น (ห้ามมีคำเกริ่นนำหรือคำลงท้าย)
|
|
2. ฟิลด์ตัวเลข (price, stock) ต้องเป็น Number เท่านั้น ห้ามใส่เครื่องหมายคำพูด (ห้ามเป็น String)
|
|
3. หมวดหมู่สินค้า (categoryName) ให้ใช้กลุ่มคำ เช่น:
|
|
- "Skincare & Serum"
|
|
- "Sunscreen & UV Protection"
|
|
- "Face Makeup & Cushion"
|
|
- "Lip Care & Color"
|
|
- "Cleanser & Toner"
|
|
- "Eye & Brow"
|
|
4. แบรนด์ (brandName): ใส่ชื่อแบรนด์ยอดนิยมระดับโลกและแบรนด์ดังในไทย เช่น "La Roche-Posay", "CeraVe", "Laneige", "Rom&nd", "4U2", "Canmake", "Mizumi", "Jung Saem Mool"
|
|
5. รูปภาพ (images): ใส่ Array ของ URL รูปภาพจาก Unsplash เกี่ยวกับ Cosmetics, Skincare Bottle, Makeup, Lipstick เช่น:
|
|
- "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=800"
|
|
- "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=800"
|
|
- "https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=800"
|
|
- "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=800"
|
|
6. การเขียน Copywriting:
|
|
- "description": จุดเด่น สรรพคุณ ปัญหาผิวที่ตอบโจทย์ ผลลัพธ์หลังใช้ (เช่น ลดสิว, ผิวชุ่มชื้น 72 ชม., ป้องกันแสงแดด SPF50+ PA++++)
|
|
- "details": ส่วนผสมสำคัญ (Active Ingredients เช่น Niacinamide, Hyaluronic Acid, Salicylic Acid), สภาพผิวที่เหมาะสม, วิธีการใช้, ปริมาณสุทธิ
|
|
7. การรองรับหลายภาษา (Multilingual):
|
|
ระบบรองรับครบ 8 ภาษาตาม Language Code สากล:
|
|
- "th": ภาษาไทย (ภาษาหลัก)
|
|
- "en": English (สากล)
|
|
- "ja": 日本語 (ญี่ปุ่น)
|
|
- "zh": 简体中文 (จีนตัวย่อ)
|
|
- "vi": Tiếng Việt (เวียดนาม)
|
|
- "ko": 한국어 (เกาหลี)
|
|
- "lo": ພາສາລາວ (ลาว)
|
|
- "it": Italiano (อิตาลี)
|
|
ในฟิลด์ "translations" ให้สร้าง Object สำหรับแต่ละรหัสภาษาที่มี "name", "description", "details" แปลอย่างเป็นธรรมชาติ ตรงกับศัพท์ความงามและเครื่องสำอาง
|
|
8. โครงสร้างประเภทสินค้า:
|
|
- สินค้าเดี่ยว (Simple): เซรั่ม, โฟมล้างหน้า, ครีมกันแดดทั่วไป (ใส่ price, stock, sku, barcode ที่ระดับบนสุด)
|
|
- สินค้ามีเฉดสี / ตัวเลือก (Variable): ลิปสติก, คุชชั่น, คอนซีลเลอร์ (ต้องมี "options": [{"name": "เฉดสี", "values": ["01 Light", "02 Natural"]}] และ "variants" ที่มี option1 ตรงกัน)
|
|
|
|
[ตัวอย่างรูปแบบ JSON ที่ต้องการ]:
|
|
[
|
|
{
|
|
"name": "เซรั่มบำรุงผิวหน้าไฮยาลูรอนเข้มข้น B5 Hyaluronic Serum 30ml",
|
|
"categoryName": "Skincare & Serum",
|
|
"brandName": "La Roche-Posay",
|
|
"price": 1490,
|
|
"stock": 120,
|
|
"sku": "LRP-B5-30ML",
|
|
"barcode": "8858340010015",
|
|
"description": "เซรั่มเข้มข้นฟื้นบำรุงผิวล้ำลึก ผสานไฮยาลูรอนิค 2 โมเลกุล และวิตามินบี 5 ช่วยเติมเต็มความชุ่มชื้น ลดเลือนริ้วรอยแรกเริ่ม ให้ผิวดูอิ่มฟู เปล่งปลั่ง สุขภาพดี เหมาะกับผิวบอบบางแพ้ง่าย",
|
|
"details": "• Active Ingredients: Pure Hyaluronic Acid, Vitamin B5 (Panthenol), Madecassoside\\n• คุณสมบัติ: คืนความยืดหยุ่น ปลอบประโลมผิวขาดน้ำ เสริมเกราะป้องกันผิว\\n• วิธีใช้: ทาบำรุงทั่วใบหน้าและลำคอเป็นประจำเช้า-เย็น ก่อนทามอยส์เจอไรเซอร์\\n• ปริมาณสุทธิ: 30 ml\\n• สูตร Paraben-free, Non-comedogenic",
|
|
"images": [
|
|
"https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=800"
|
|
],
|
|
"translations": {
|
|
"th": {
|
|
"name": "เซรั่มบำรุงผิวหน้าไฮยาลูรอนเข้มข้น B5 Hyaluronic Serum 30ml",
|
|
"description": "เซรั่มเข้มข้นฟื้นบำรุงผิวล้ำลึก ผสานไฮยาลูรอนิคและวิตามินบี 5 ให้ผิวดูอิ่มฟู เปล่งปลั่ง อ่อนโยนต่อผิวแพ้ง่าย",
|
|
"details": "• ส่วนผสมหลัก: Pure Hyaluron, Vitamin B5\\n• วิธีใช้: ทาทั่วใบหน้า เช้า-เย็น\\n• ขนาด: 30ml"
|
|
},
|
|
"en": {
|
|
"name": "Hyalu B5 Pure Hyaluronic Acid Face Serum 30ml",
|
|
"description": "Anti-aging ultra-hydrating pure hyaluronic acid serum with Vitamin B5. Replenishes skin moisture barrier and visibly plumps skin.",
|
|
"details": "• Key Ingredients: Hyaluronic Acid, Vitamin B5, Madecassoside\\n• Usage: Apply 3-4 drops morning and evening to face and neck.\\n• Volume: 30ml"
|
|
},
|
|
"ja": {
|
|
"name": "ヒアロ B5 ヒアルロン酸 美容液 30ml",
|
|
"description": "2種の高純度ヒアルロン酸とビタミンB5配合。敏感肌にもうるおいとハリを与える濃縮エイジングケアセラム。",
|
|
"details": "• 主成分: 純粋ヒアルロン酸, ビタミンB5\\n• 使用方法: 朝晩、化粧水の後にお使いください\\n• 容量: 30ml"
|
|
},
|
|
"zh": {
|
|
"name": "理肤泉 B5 玻尿酸紧致修护精华液 30ml",
|
|
"description": "蕴含高纯度双分子玻尿酸与维生素原B5，深层补水锁水，修护肌肤屏障，淡化细纹，重焕弹润光彩。",
|
|
"details": "• 核心成分: 玻尿酸、维生素原B5、积雪草苷\\n• 用法: 早晚取3-4滴涂抹于面部及颈部\\n• 规格: 30ml"
|
|
},
|
|
"vi": {
|
|
"name": "Serum phục hồi và cấp ẩm Hyalu B5 30ml",
|
|
"description": "Tinh chất dưỡng ẩm chuyên sâu với Hyaluronic Acid và Vitamin B5 giúp phục hồi hàng rào bảo vệ da, cho làn da căng mọng đàn hồi.",
|
|
"details": "• Thành phần: Hyaluronic Acid, Vitamin B5\\n• Dung tích: 30ml"
|
|
},
|
|
"ko": {
|
|
"name": "히알루 B5 퓨어 히알루론산 세럼 30ml",
|
|
"description": "고순도 히알루론산과 비타민 B5가 피부 탄력과 수분 장벽을 집중 케어하여 촉촉하고 탄탄한 피부로 가꿔줍니다.",
|
|
"details": "• 주요성분: 히알루론산, 비타민 B5\\n• 용량: 30ml"
|
|
},
|
|
"lo": {
|
|
"name": "ເຊຣັ່ມບຳລຸງຜິວໜ້າ ໄຮຢາລູຣອນເຂັ້ມຂຸ້ນ B5 30ml",
|
|
"description": "ເຊຣັ່ມເຂັ້ມຂຸ້ນຟື້ນຟູຜິວຢ່າງລ້ຳລຶກ ຜະສານໄຮຢາລູຣອນ ແລະ ວິຕາມິນ B5 ໃຫ້ຜິວຊຸ່ມຊື່ນອີ່ມຟູ.",
|
|
"details": "• ສ່ວນປະສົມຫຼັກ: Hyaluron, Vitamin B5\\n• ຂະໜາດ: 30ml"
|
|
},
|
|
"it": {
|
|
"name": "Siero Viso Idratante Antirughe Hyalu B5 30ml",
|
|
"description": "Siero concentrato riparatore e rimpolpante all'Acido Ialuronico puro e Vitamina B5 per pelle disidratata e sensibile.",
|
|
"details": "• Ingredienti: Acido Ialuronico, Vitamina B5\\n• Volume: 30ml"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "คุชชั่นผิวโกลว์เนื้อบางเบา Dewy Radiant Cushion SPF50+ PA++++",
|
|
"categoryName": "Face Makeup & Cushion",
|
|
"brandName": "Jung Saem Mool",
|
|
"options": [
|
|
{
|
|
"name": "เฉดสี",
|
|
"values": ["#19 Fair-Light", "#21 Light", "#23 Medium"]
|
|
}
|
|
],
|
|
"variants": [
|
|
{
|
|
"option1": "#19 Fair-Light",
|
|
"price": 1350,
|
|
"stock": 45,
|
|
"sku": "JSM-CUSH-19",
|
|
"barcode": "8858340020014"
|
|
},
|
|
{
|
|
"option1": "#21 Light",
|
|
"price": 1350,
|
|
"stock": 80,
|
|
"sku": "JSM-CUSH-21",
|
|
"barcode": "8858340020021"
|
|
},
|
|
{
|
|
"option1": "#23 Medium",
|
|
"price": 1350,
|
|
"stock": 60,
|
|
"sku": "JSM-CUSH-23",
|
|
"barcode": "8858340020038"
|
|
}
|
|
],
|
|
"images": [
|
|
"https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=800"
|
|
],
|
|
"translations": {
|
|
"th": {
|
|
"name": "คุชชั่นผิวโกลว์เนื้อบางเบา Dewy Radiant Cushion SPF50+ PA++++",
|
|
"description": "คุชชั่นเนื้อบางเบา ปกปิดเรียบเนียน ฟินิชผิวโกลว์สุขภาพดี ติดทนตลอดวัน",
|
|
"details": "• กันแดด SPF50+ PA++++ พร้อมตลับจริงและรีฟิล 14g x 2"
|
|
},
|
|
"en": {
|
|
"name": "Dewy Radiant Glow Cushion Foundation SPF50+ PA++++",
|
|
"description": "Long-lasting weightless cushion foundation delivering a luminous, natural glow with buildable coverage.",
|
|
"details": "• Sun Protection: SPF50+ PA++++\\n• Includes: Compact 14g + Refill 14g"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
[คำสั่ง]:
|
|
กรุณาสร้างรายการสินค้ากลุ่ม Beauty & Cosmetics ตามข้อกำหนดด้านบน จำนวน 8 รายการ โดยครอบคลุมทั้ง Serum, Sunscreen, Cushion, Matte Lipstick, Cleanser, Toner จากแบรนด์ดังในสไตล์ EVEANDBOY / Beautrium ส่งผลลัพธ์เป็น Valid JSON Array เท่านั้น`
|
|
|
|
const FASHION_PROMPT = `คุณคือ Senior Fashion Merchandiser และ Apparel Catalog Specialist เชี่ยวชาญการจัดทำฐานข้อมูลสินค้าสำหรับแบรนด์เสื้อผ้าและแฟชั่นรีเทลชั้นนำ เช่น Jaspal, CPS CHAPS, CC Double O, Lyn Around, Zara, Gentlewoman
|
|
|
|
[ภารกิจของคุณ]:
|
|
สร้างข้อมูลสินค้าแฟชั่นและเครื่องแต่งกายสำหรับนำเข้าสู่ระบบ E-commerce ในรูปแบบ **Valid JSON Array** ตาม Schema ของระบบอย่างเคร่งครัด
|
|
|
|
[กฎและข้อกำหนดทางเทคนิค]:
|
|
1. ผลลัพธ์ต้องเป็น Valid JSON Array ล้วนๆ เริ่มต้นด้วย [ และจบด้วย ] เท่านั้น (ห้ามมีคำเกริ่นนำหรือคำลงท้าย)
|
|
2. ฟิลด์ตัวเลข (price, stock) ต้องเป็น Number เท่านั้น ห้ามใส่เครื่องหมายคำพูด (ห้ามเป็น String)
|
|
3. หมวดหมู่สินค้า (categoryName) ให้ใช้กลุ่มคำ เช่น:
|
|
- "Tops & Shirts"
|
|
- "Dresses & Jumpsuits"
|
|
- "Trousers & Denim"
|
|
- "Outerwear & Blazers"
|
|
- "Bags & Leather Goods"
|
|
- "Accessories & Belts"
|
|
4. แบรนด์ (brandName): ใส่ชื่อแบรนด์แฟชั่นชั้นนำ เช่น "Jaspal", "CPS CHAPS", "CC Double O", "Lyn Around", "Misty Mynx", "Royal Ivy Regatta", "Gentlewoman"
|
|
5. รูปภาพ (images): ใส่ Array ของ URL รูปภาพจาก Unsplash เกี่ยวกับ Fashion, Apparel, Model, Handbag, Outfit เช่น:
|
|
- "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800"
|
|
- "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=800"
|
|
- "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=800"
|
|
- "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=800"
|
|
- "https://images.unsplash.com/photo-1576995853123-5a10305d93c0?w=800"
|
|
6. การเขียน Copywriting:
|
|
- "description": ซิลูเอท (Silhouette), คอนเซปต์การดีไซน์, โอกาสในการสวมใส่ (Workwear, Casual, Evening), ลุคที่ได้
|
|
- "details": เนื้อผ้า (Fabric composition เช่น 100% Cotton, Linen blend, Polyester Satin), คัตติ้ง, ซับใน, วิธีการดูแลรักษา (ซักมือ, ห้ามฟอกขาว, รีดไฟอ่อน), ตารางเทียบขนาด (Sizing guide)
|
|
7. การรองรับหลายภาษา (Multilingual):
|
|
ระบบรองรับครบ 8 ภาษาตาม Language Code สากล:
|
|
- "th": ภาษาไทย (ภาษาหลัก)
|
|
- "en": English (สากล)
|
|
- "ja": 日本語 (ญี่ปุ่น)
|
|
- "zh": 简体中文 (จีนตัวย่อ)
|
|
- "vi": Tiếng Việt (เวียดนาม)
|
|
- "ko": 한국어 (เกาหลี)
|
|
- "lo": ພາສາລາວ (ลาว)
|
|
- "it": Italiano (อิตาลี)
|
|
ในฟิลด์ "translations" ให้สร้าง Object สำหรับแต่ละรหัสภาษาที่มี "name", "description", "details" แปลอย่างเป็นธรรมชาติ ตรงตามศัพท์แฟชั่น ดีไซน์ และการดูแลรักษาผ้า
|
|
8. โครงสร้างประเภทสินค้า:
|
|
- สินค้ามีขนาด / ไซส์ (Variable): เสื้อ, เดรส, กางเกง ต้องมี "options": [{"name": "ขนาด", "values": ["S", "M", "L"]}] และ "variants" ที่มี option1 ตรงตาม values ทุกประการ
|
|
- สินค้าชิ้นเดียว (Simple): กระเป๋าโท้ท, เข็มขัดหนัง, ผ้าพันคอ (ใส่ price, stock, sku, barcode ที่ระดับบนสุด)
|
|
|
|
[ตัวอย่างรูปแบบ JSON ที่ต้องการ]:
|
|
[
|
|
{
|
|
"name": "เดรสสั้นผ้าซาตินคอวีทรงเข้ารูป Satin V-Neck Mini Dress",
|
|
"categoryName": "Dresses & Jumpsuits",
|
|
"brandName": "Jaspal",
|
|
"description": "มินิเดรสผ้าซาตินเนื้อเงาพรีเมียม โดดเด่นด้วยดีเทลคอวีทรงป้ายและตีเกล็ดช่วงเอว ช่วยเสริมสรีระให้ดูเพรียวระหง เหมาะสำหรับใส่ทำงานหรือแฮงเอาท์ในงานปาร์ตี้ช่วงค่ำ",
|
|
"details": "• เนื้อผ้า: 95% Polyester, 5% Spandex (ซาตินทอละเอียด ทิ้งตัวสวย)\\n• ซับใน: มีซับในเต็มตัว ผิวสัมผัสนุ่มลื่น ไม่ระคายเคือง\\n• การเปิด-ปิด: ซิปซ่อนด้านหลัง รูดลื่นเรียบเนียน\\n• การดูแลรักษา: ควรซักแห้งหรือซักมือด้วยน้ำเย็น รีดด้านในด้วยไฟอ่อน\\n• นางแบบสูง 175 ซม. สวมใส่ไซส์ S",
|
|
"images": [
|
|
"https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800"
|
|
],
|
|
"options": [
|
|
{
|
|
"name": "ขนาด",
|
|
"values": ["S", "M", "L"]
|
|
}
|
|
],
|
|
"variants": [
|
|
{
|
|
"option1": "S",
|
|
"price": 2490,
|
|
"stock": 20,
|
|
"sku": "JSP-DRS-01-S",
|
|
"barcode": "8857410010012"
|
|
},
|
|
{
|
|
"option1": "M",
|
|
"price": 2490,
|
|
"stock": 35,
|
|
"sku": "JSP-DRS-01-M",
|
|
"barcode": "8857410010029"
|
|
},
|
|
{
|
|
"option1": "L",
|
|
"price": 2490,
|
|
"stock": 15,
|
|
"sku": "JSP-DRS-01-L",
|
|
"barcode": "8857410010036"
|
|
}
|
|
],
|
|
"translations": {
|
|
"th": {
|
|
"name": "เดรสสั้นผ้าซาตินคอวีทรงเข้ารูป Satin V-Neck Mini Dress",
|
|
"description": "มินิเดรสผ้าซาตินเงางามพรีเมียม ทรงสวยช่วยเสริมสรีระ เหมาะสำหรับออกงานหรือวันพิเศษ",
|
|
"details": "• ผ้า: 95% Polyester, 5% Spandex\\n• มีซับในเต็มตัว พร้อมซิปซ่อนด้านหลัง"
|
|
},
|
|
"en": {
|
|
"name": "Satin V-Neck Fitted Mini Dress",
|
|
"description": "Lustrous premium satin mini dress with flattering draped V-neckline and tailored waistline for elevated daytime or evening look.",
|
|
"details": "• Material: 95% Polyester, 5% Spandex\\n• Fully lined with concealed back zipper"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
[คำสั่ง]:
|
|
กรุณาสร้างรายการสินค้ากลุ่ม Fashion & Apparel ตามข้อกำหนดด้านบน จำนวน 8 รายการ โดยผสมผสานระหว่าง Shirts, Trousers, Blazers, Dresses, Handbags จากแบรนด์ดังในสไตล์ Jaspal / CPS CHAPS ส่งผลลัพธ์เป็น Valid JSON Array เท่านั้น`
|
|
|
|
const MOTO_PROMPT = `คุณคือ Senior Motorcycle Parts Specialist และ Aftermarket Catalog Merchandiser เชี่ยวชาญการจัดทำฐานข้อมูลอะไหล่แต่งมอเตอร์ไซค์สมรรถนะสูง เช่น RCB (Racing Boy), Brembo, Öhlins, YSS Suspension, Akrapovič, Yoshimura
|
|
|
|
[ภารกิจของคุณ]:
|
|
สร้างข้อมูลสินค้าอะไหล่แต่งและอุปกรณ์มอเตอร์ไซค์สำหรับนำเข้าสู่ระบบ E-commerce ในรูปแบบ **Valid JSON Array** ตาม Schema ของระบบอย่างเคร่งครัด
|
|
|
|
[กฎและข้อกำหนดทางเทคนิค]:
|
|
1. ผลลัพธ์ต้องเป็น Valid JSON Array ล้วนๆ เริ่มต้นด้วย [ และจบด้วย ] เท่านั้น (ห้ามมีคำเกริ่นนำหรือคำลงท้าย)
|
|
2. ฟิลด์ตัวเลข (price, stock) ต้องเป็น Number เท่านั้น ห้ามใส่เครื่องหมายคำพูด (ห้ามเป็น String)
|
|
3. หมวดหมู่สินค้า (categoryName) ให้ใช้กลุ่มคำ เช่น:
|
|
- "Brake Systems & Calipers"
|
|
- "Suspension & Shocks"
|
|
- "Master Cylinders & Levers"
|
|
- "Exhaust & Headers"
|
|
- "Alloy Wheels & Footrests"
|
|
- "Engine & Drivetrain Performance"
|
|
4. แบรนด์ (brandName): ใส่ชื่อแบรนด์อะไหล่แต่งชั้นนำ เช่น "RCB", "Brembo", "Öhlins", "YSS Suspension", "Akrapovič", "Yoshimura", "GaleSpeed"
|
|
5. รูปภาพ (images): ใส่ Array ของ URL รูปภาพจาก Unsplash เกี่ยวกับ Motorcycle Parts, Mechanic, Motorbike, Caliper เช่น:
|
|
- "https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800"
|
|
- "https://images.unsplash.com/photo-1568772585407-9361f9bf3a87?w=800"
|
|
- "https://images.unsplash.com/photo-1599819811279-d5ad9cccf838?w=800"
|
|
- "https://images.unsplash.com/photo-1609630875171-b1321377ee65?w=800"
|
|
6. การเขียน Copywriting:
|
|
- "description": คุณสมบัติการขับขี่ การระบายความร้อน การลดระยะเบรก สมรรถนะในสนามแข่งและการใช้งานบนท้องถนน รุ่นรถที่รองรับ (Compatible models เช่น Forza 350, XMAX 300, Wave 125i, CBR650R)
|
|
- "details": วัสดุ (เช่น Billet Aluminum 6061-T6 CNC, Hard Anodized finish), ลูกสูบเบรก (Piston spec), การปรับพรีโหลด/รีบาวด์ (Preload & Rebound damping), มาตรฐาน มอก. หรือ Racing Certified
|
|
7. การรองรับหลายภาษา (Multilingual):
|
|
ระบบรองรับครบ 8 ภาษาตาม Language Code สากล:
|
|
- "th": ภาษาไทย (ภาษาหลัก)
|
|
- "en": English (สากล)
|
|
- "ja": 日本語 (ญี่ปุ่น)
|
|
- "zh": 简体中文 (จีนตัวย่อ)
|
|
- "vi": Tiếng Việt (เวียดนาม)
|
|
- "ko": 한국어 (เกาหลี)
|
|
- "lo": ພາສາລາວ (ลาว)
|
|
- "it": Italiano (อิตาลี)
|
|
ในฟิลด์ "translations" ให้สร้าง Object สำหรับแต่ละรหัสภาษาที่มี "name", "description", "details" แปลอย่างเป็นธรรมชาติ ตรงตามศัพท์เทคนิควิศวกรรมยานยนต์และอะไหล่แต่ง
|
|
8. โครงสร้างประเภทสินค้า:
|
|
- สินค้ามีสีอะโนไดซ์ / ความยาว (Variable): ปั๊มเบรกบน, โช้คอัพ ต้องมี "options": [{"name": "สีอะโนไดซ์", "values": ["Gold", "Red", "Black"]}] และ "variants" ที่มี option1 ตรงตาม values ทุกประการ
|
|
- สินค้าชิ้นเดียว (Simple): จานดิสก์เบรกแต่ง, สายเบรกถักหัวสแตนเลส (ใส่ price, stock, sku, barcode ที่ระดับบนสุด)
|
|
|
|
[ตัวอย่างรูปแบบ JSON ที่ต้องการ]:
|
|
[
|
|
{
|
|
"name": "ชุดปั๊มเบรกบนเรเดียลมาสเตอร์ไซลินเดอร์ Radial Master Cylinder S1 14mm",
|
|
"categoryName": "Master Cylinders & Levers",
|
|
"brandName": "RCB",
|
|
"description": "ปั๊มบนเรเดียลเกรดพรีเมียมจาก RCB รุ่น S1 ขนาดลูกสูบ 14 มม. ผลิตด้วยกระบวนการขึ้นรูป Forged Alloy แข็งแกร่งแต่น้ำหนักเบา ให้แรงกดเบรกที่นุ่มนวล แม่นยำ ฟีลลิ่งเบรกกระชับ รองรับรถสปอร์ตและบิ๊กสกู๊ตเตอร์ทุกรุ่น",
|
|
"details": "• ลูกสูบ: Forged Alloy 14mm Piston\\n• วัสดุบอดี้: อลูมิเนียม Forged CNC ชุบผิว Hard Anodized ป้องกันสนิมและรอยขีดข่วน\\n• ก้านเบรก: ปรับระยะได้ 6 ระดับ พร้อมร่องระบายลม Aerodynamic ป้องกันลมพัดก้านเบรกดีด\\n• กระปุกน้ำมัน: กระปุกควัน Smokey Tank พร้อมขายึดอลูมิเนียมแต่ง\\n• รุ่นรถที่รองรับ: Universal (แฮนด์บาร์ 22mm เช่น XMAX 300, Forza 350, R15, MT-15)",
|
|
"images": [
|
|
"https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800"
|
|
],
|
|
"options": [
|
|
{
|
|
"name": "สีอะโนไดซ์",
|
|
"values": ["Black", "Gold", "Red"]
|
|
}
|
|
],
|
|
"variants": [
|
|
{
|
|
"option1": "Black",
|
|
"price": 3250,
|
|
"stock": 30,
|
|
"sku": "RCB-S1-14MM-BLK",
|
|
"barcode": "8856230010013"
|
|
},
|
|
{
|
|
"option1": "Gold",
|
|
"price": 3250,
|
|
"stock": 25,
|
|
"sku": "RCB-S1-14MM-GLD",
|
|
"barcode": "8856230010020"
|
|
},
|
|
{
|
|
"option1": "Red",
|
|
"price": 3250,
|
|
"stock": 18,
|
|
"sku": "RCB-S1-14MM-RED",
|
|
"barcode": "8856230010037"
|
|
}
|
|
],
|
|
"translations": {
|
|
"th": {
|
|
"name": "ชุดปั๊มเบรกบนเรเดียลมาสเตอร์ไซลินเดอร์ Radial Master Cylinder S1 14mm",
|
|
"description": "ปั๊มบนเรเดียล Forged Alloy 14mm ปรับระยะได้ 6 ระดับ แรงเบรกนุ่มนวล แม่นยำ ทนทานสูง",
|
|
"details": "• ลูกสูบ 14mm Forged CNC Anodized\\n• รองรับแฮนด์ 22mm สากล"
|
|
},
|
|
"en": {
|
|
"name": "RCB S1 14mm Radial Master Cylinder Brake Pump",
|
|
"description": "High-performance forged alloy radial master cylinder engineered for superior braking feel, precise hydraulic feedback and race-grade durability.",
|
|
"details": "• Piston Size: 14mm Forged Alloy\\n• Finish: Hard Anodized Coating\\n• Fitment: Universal 22mm Handlebars"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
[คำสั่ง]:
|
|
กรุณาสร้างรายการสินค้ากลุ่ม Motorcycle Parts & Accessories ตามข้อกำหนดด้านบน จำนวน 8 รายการ โดยครอบคลุมทั้ง Master Cylinder, Shock Absorber, Brake Caliper, Exhaust, Alloy Wheel จากแบรนด์ดังในสไตล์ RCB / Brembo / Ohlins ส่งผลลัพธ์เป็น Valid JSON Array เท่านั้น`
|
|
|
|
interface TabItem {
|
|
id: string
|
|
label: string
|
|
shortLabel: string
|
|
icon: any
|
|
badge: string
|
|
color: string
|
|
demoDomain?: string
|
|
brands: string
|
|
content: string
|
|
}
|
|
|
|
const TABS: TabItem[] = [
|
|
{
|
|
id: 'overview',
|
|
label: 'คู่มือภาพรวม & Schema Rules',
|
|
shortLabel: 'Overview',
|
|
icon: BookOpen,
|
|
badge: 'Universal Guide',
|
|
color: 'from-cyan-500 to-blue-500',
|
|
brands: 'Universal E-commerce Schema',
|
|
content: GUIDE_OVERVIEW_MARKDOWN
|
|
},
|
|
{
|
|
id: 'wellness',
|
|
label: '1. Wellness & Luxury',
|
|
shortLabel: 'Wellness',
|
|
icon: Flower2,
|
|
badge: 'Panpuri / Jo Malone',
|
|
color: 'from-amber-500 to-emerald-500',
|
|
demoDomain: 'wellness.kittisak.com',
|
|
brands: 'Panpuri, Jo Malone, Diptyque, Aesop, HARNN',
|
|
content: WELLNESS_PROMPT
|
|
},
|
|
{
|
|
id: 'beauty',
|
|
label: '2. Beauty & Multi-Brand',
|
|
shortLabel: 'Beauty',
|
|
icon: Sparkle,
|
|
badge: 'EVEANDBOY / Beautrium',
|
|
color: 'from-pink-500 to-rose-500',
|
|
demoDomain: 'beauty.kittisak.com',
|
|
brands: 'La Roche-Posay, CeraVe, Laneige, Rom&nd, 4U2, Jung Saem Mool',
|
|
content: BEAUTY_PROMPT
|
|
},
|
|
{
|
|
id: 'fashion',
|
|
label: '3. Fashion & Lifestyle',
|
|
shortLabel: 'Fashion',
|
|
icon: Shirt,
|
|
badge: 'Jaspal / Zara / CPS',
|
|
color: 'from-purple-500 to-indigo-500',
|
|
demoDomain: 'fashion.kittisak.com',
|
|
brands: 'Jaspal, CPS CHAPS, CC Double O, Lyn Around, Zara, Gentlewoman',
|
|
content: FASHION_PROMPT
|
|
},
|
|
{
|
|
id: 'moto',
|
|
label: '4. Motorcycle Parts',
|
|
shortLabel: 'Moto Parts',
|
|
icon: Wrench,
|
|
badge: 'RCB / Brembo / Ohlins',
|
|
color: 'from-orange-500 to-red-500',
|
|
demoDomain: 'moto.kittisak.com',
|
|
brands: 'RCB (Racing Boy), Brembo, Öhlins, YSS Suspension, Akrapovič',
|
|
content: MOTO_PROMPT
|
|
}
|
|
]
|
|
|
|
export default function ProductJsonGuideModal({ isOpen, onClose, onOpenImport }: ProductJsonGuideModalProps) {
|
|
const [activeTab, setActiveTab] = useState<string>('overview')
|
|
const [copied, setCopied] = useState<boolean>(false)
|
|
|
|
if (!isOpen) return null
|
|
|
|
const currentTabItem = TABS.find(t => t.id === activeTab) || TABS[0]
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(currentTabItem.content)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2500)
|
|
} catch (err) {
|
|
console.error('Failed to copy text:', err)
|
|
alert('ไม่สามารถ Copy ได้อัตโนมัติ กรุณาเลือกข้อความแล้วกด Ctrl+C')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-night-950/85 backdrop-blur-md flex items-center justify-center p-3 sm:p-5 animate-fade-in">
|
|
<div className="w-full max-w-5xl bg-night-900 border border-white/10 rounded-3xl shadow-2xl flex flex-col max-h-[92vh] overflow-hidden animate-zoom-in">
|
|
|
|
{/* Header */}
|
|
<div className="p-5 sm:p-6 border-b border-white/10 bg-white/[0.02] flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3.5">
|
|
<div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-purple-500/20 via-pink-500/10 to-cyan-500/20 border border-purple-500/30 flex items-center justify-center text-purple-300 shadow-inner">
|
|
<Sparkles className="w-6 h-6 text-purple-300 animate-pulse" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-lg sm:text-xl font-bold text-white tracking-wide">
|
|
AI Product JSON Generator Guide
|
|
</h3>
|
|
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-purple-500/20 text-purple-300 border border-purple-500/30 uppercase tracking-wider">
|
|
8-Languages
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-slate-400 mt-0.5">
|
|
คู่มือและชุด Prompt สำหรับส่งให้ LLM (ChatGPT / Claude / Gemini) เพื่อสร้างข้อมูล JSON นำเข้าสินค้า
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleCopy}
|
|
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer shadow-lg ${
|
|
copied
|
|
? 'bg-emerald-500 text-night-950 shadow-emerald-500/20'
|
|
: 'bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-400 hover:to-indigo-400 text-white shadow-purple-500/20'
|
|
}`}
|
|
title="คัดลอกข้อความในแท็บปัจจุบัน"
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<Check className="w-4 h-4" />
|
|
<span>คัดลอกสำเร็จ!</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy className="w-4 h-4" />
|
|
<span>Copy {currentTabItem.id === 'overview' ? 'Guide' : 'Prompt'}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="px-5 sm:px-6 pt-3 pb-2 border-b border-white/5 bg-night-950/40 flex items-center gap-2 overflow-x-auto scrollbar-hide">
|
|
{TABS.map((tab) => {
|
|
const Icon = tab.icon
|
|
const isActive = activeTab === tab.id
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => {
|
|
setActiveTab(tab.id)
|
|
setCopied(false)
|
|
}}
|
|
className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all cursor-pointer ${
|
|
isActive
|
|
? 'bg-white/10 text-white border border-white/15 shadow-md shadow-black/20'
|
|
: 'text-slate-400 hover:text-slate-200 hover:bg-white/5 border border-transparent'
|
|
}`}
|
|
>
|
|
<Icon className={`w-3.5 h-3.5 ${isActive ? 'text-cyan-glow' : 'text-slate-500'}`} />
|
|
<span>{tab.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Tab Content Header Info */}
|
|
<div className="px-5 sm:px-6 py-3 bg-white/[0.015] border-b border-white/5 flex flex-wrap items-center justify-between gap-3 text-xs">
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<span className="font-semibold text-white">{currentTabItem.badge}:</span>
|
|
<span className="text-slate-400 truncate max-w-md">{currentTabItem.brands}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{currentTabItem.demoDomain && (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20 text-[11px] font-mono">
|
|
<Globe2 className="w-3 h-3" />
|
|
<span>Demo: {currentTabItem.demoDomain}</span>
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] text-slate-400 font-mono">
|
|
{currentTabItem.content.length.toLocaleString()} characters
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Body */}
|
|
<div className="flex-1 overflow-y-auto p-5 sm:p-6 space-y-4 font-sans text-sm text-slate-200 leading-relaxed">
|
|
{/* Quick Tip Alert */}
|
|
{activeTab !== 'overview' ? (
|
|
<div className="p-3.5 sm:p-4 rounded-2xl bg-gradient-to-r from-purple-500/10 via-indigo-500/5 to-cyan-500/10 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-3 shadow-inner">
|
|
<div className="p-1 rounded-lg bg-purple-500/20 text-purple-300 shrink-0 mt-0.5">
|
|
<Sparkles className="w-3.5 h-3.5" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-white">
|
|
คำแนะนำการนำไปใช้งาน:
|
|
</p>
|
|
<p className="text-slate-300 text-[11px] leading-relaxed">
|
|
กดปุ่ม <strong>"Copy Prompt"</strong> ด้านบน แล้วนำไปวางใน <strong>ChatGPT, Claude 3.5 หรือ Gemini</strong> โดยสามารถพิมพ์คำสั่งต่อท้ายได้ เช่น <em>"ขอสินค้าจำนวน 20 รายการสำหรับเปิดร้านใหม่"</em> จากนั้นคัดลอก JSON ที่ได้กลับมากด <strong>"Import JSON"</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-3.5 sm:p-4 rounded-2xl bg-cyan-glow/5 border border-cyan-glow/20 text-xs text-cyan-200 flex items-start gap-3 shadow-inner">
|
|
<div className="p-1 rounded-lg bg-cyan-glow/20 text-cyan-glow shrink-0 mt-0.5">
|
|
<Layers className="w-3.5 h-3.5" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-white">
|
|
ระบบรองรับ Multi-language ครบ 8 ภาษา:
|
|
</p>
|
|
<p className="text-slate-300 text-[11px] leading-relaxed">
|
|
TH (ไทย), EN (สากล), JA (ญี่ปุ่น), ZH (จีนตัวย่อ), VI (เวียดนาม), KO (เกาหลี), LO (ลาว), IT (อิตาลี) พร้อมระบบแปลง Simple / Variable Variant ให้อัตโนมัติ
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Text Area / Code Display */}
|
|
<div className="relative group">
|
|
<pre className="p-4 sm:p-5 rounded-2xl bg-night-950 border border-white/10 font-mono text-xs text-slate-300 leading-relaxed whitespace-pre-wrap select-all overflow-x-auto shadow-inner max-h-[48vh] focus:outline-none">
|
|
{currentTabItem.content}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 sm:p-5 border-t border-white/10 bg-white/[0.015] flex flex-col sm:flex-row items-center justify-between gap-3 text-xs">
|
|
<div className="flex items-center gap-2 text-slate-400">
|
|
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
|
|
<span>พร้อมใช้งานร่วมกับเมนูนำเข้าสินค้า <strong>Import JSON</strong></span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2.5 w-full sm:w-auto justify-end">
|
|
{onOpenImport && (
|
|
<button
|
|
onClick={() => {
|
|
onClose()
|
|
onOpenImport()
|
|
}}
|
|
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 text-xs font-bold transition-all cursor-pointer"
|
|
>
|
|
<Code2 className="w-4 h-4" />
|
|
<span>เปิดหน้าต่าง Import JSON</span>
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={handleCopy}
|
|
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 hover:text-white border border-white/10 text-xs font-semibold cursor-pointer transition-colors"
|
|
>
|
|
<Copy className="w-3.5 h-3.5" />
|
|
<span>Copy ข้อความ</span>
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-white text-xs font-semibold cursor-pointer transition-colors"
|
|
>
|
|
ปิดหน้าต่าง
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|