حول PreviewPane
نحن ملتزمون بتوفير أفضل أدوات معاينة ومشاركة الكود للمطورين
جعل عرض الكود أنيقًا، وجعل مشاركة المعرفة بسيطة
مهمة المنتج
PreviewPane هي أداة تحرير وتصدير الكود القائمة على الويب المصممة خصيصًا للمطورين الأماميين، والمصممين، والسيناريوهات التعليمية. هدفنا هو السماح للمستخدمين بتحرير كود HTML + CSS بسهولة في المتصفح، ومعاينة تأثيرات التشغيل في الوقت الفعلي، وأخيرًا التصدير كملفات صور عالية الجودة.
الميزات الأساسية
وظائف احترافية مصممة بناءً على وثائق المتطلبات لتلبية الاحتياجات الفعلية للمطورين
لوحة المحرر
تدعم تحرير كود HTML + CSS مع تمييز الصيغة، وتستخدم خطوط أحادية المسافة، وتوفر كود عينة افتراضي
لوحة المعاينة
عرض HTML + CSS في الوقت الفعلي، WYSIWYG، تأثيرات عرض الصفحة متطابقة تمامًا مع الصور المصدرة، ولا تنفذ JavaScript
تصدير صور الكود
تعرض الكود في لوحة المحرر إلى صور، مع الحفاظ على أنماط المحرر الأصلية (الخلفية، الخطوط، الحدود، الزوايا المستديرة)
تصدير تأثيرات التشغيل
تصدير التأثيرات المعروضة في لوحة المعاينة كـ PNG، مما يضمن أن الصور تتطابق تمامًا مع تأثيرات الصفحة
أنماط تصدير متعددة
تدعم الافتراضي، البطاقة، نمط ماك أو إس، نمط الطرفية، أربعة سمات نمط تصدير مختلفة
تصميم متجاوب
تخطيط من أعلى إلى أسفل للموبايل، وتخطيط من اليسار إلى اليمين لسطح المكتب، تصميم متجاوب، تم بناؤه باستخدام TailwindCSS
البنية التقنية
前端技术栈：مجموعة التقنيات الأمامية: تم بناء PreviewPane على تقنيات الويب الحديثة، باستخدام إطار عمل React + Next.js، و TailwindCSS لتطوير الأنماط السريع والتخطيط المتجاوب، و Monaco Editor يوفر تجربة تحرير كود احترافية.
核心实现：التنفيذ الأساسي: يحفظ المحرر حالة الكود من خلال useState، وتستخدم لوحة المعاينة dangerouslySetInnerHTML لعرض HTML + CSS في الوقت الفعلي. وظيفة التصدير القائمة على مكتبة html-to-image تولد صور PNG، ومكتبة file-saver تتعامل مع تنزيلات الملفات.
设计理念：فلسفة التصميم: تتبع مبدأ WYSIWYG، مما يضمن أن الصور المصدرة تتطابق تمامًا مع تأثيرات عرض الصفحة. لا تنفذ كود JavaScript للمستخدم، مما يتجنب المخاطر الأمنية. جميع الأنماط مضمنة أو في علامات الأنماط، مما يضمن التصدير الناجح.