البناء بالذكاء الاصطناعي
المعاينة الحية — أحجام العرض وأدوات المعاينة
المعاينة تعرض مشروعك أثناء بنائه وتعديله، في إطار معزول بجانب المحادثة. تبدّل بين ثلاثة أحجام عرض، وتتنقّل بين الصفحات، وتعاين نسخة سابقة، وتفتح النسخة المحفوظة في تبويب مستقل.
في هذه الصفحة
فتح المعاينة
في «محرر الذكاء» تبدّل لوحة العرض بين «معاينة» و«كود» من رأس الشاشة. رأس المعاينة يقول «معاينة»، ويظهر فيه «AI يبني...» أثناء طلب ذكاء اصطناعي جارٍ. المعاينة تعرض ما في المحرر الآن، ومنه تعديلات لم تُحفظ بعد.
أحجام العرض الثلاثة
| الزرّ | العرض |
|---|---|
| «سطح المكتب» | عرض لوحة المعاينة كاملاً |
| «لوحي» | 768 بكسل |
| «جوال» | 375 بكسل |
التبديل يغيّر عرض الإطار فوراً دون إعادة بناء. على الشاشات الضيقة تظهر الأيقونات وحدها دون أسمائها.
مختبر الاستجابة بقائمة أجهزة حقيقية ومقاس مخصص ونقاط توقف Tailwind «غير متاح بعد»: مكوّنه موجود في الكود لكنه غير معروض في المعاينة، فالمتاح الآن الأحجام الثلاثة أعلاه فقط.
أدوات رأس المعاينة
- «النسخ»: تعاين نسخة سابقة من المشروع داخل الإطار قبل أن تقرّر استعادتها. إن لم توجد نسخ تظهر «لا توجد نسخ محفوظة بعد.».
- «تحديث المعاينة»: يعيد رسم الإطار.
- «فتح في تبويب جديد»: يفتح النسخة المحفوظة على الخادم برابط قصير العمر، لا ما في المحرر من تعديلات غير محفوظة. إن تعذّر الرابط يفتح ما في المحرر.
شريط التنقل
حين يحتوي المشروع صفحات يظهر تحت الرأس شريط فيه «رجوع» و«تقدّم» و«تحديث المعاينة»، ومسار الصفحة الحالية، وقائمة «اذهب إلى صفحة» إن كانت الصفحات أكثر من واحدة. زرّ «أدوات إضافية» يفتح «التقاط صورة» و«تسجيل المعاينة» و«تعليق ورسم». وفي آخر الشريط حالة «يبني» أو «جاهز».
الأخطاء
- «⚠ خطأ:» خطأ من كود المشروع، ومعه زرّ «⚡ إصلاح بالـ AI» يرسل نص الخطأ طلباً إلى الذكاء الاصطناعي، فيُحتسب من حصتك ولا يعمل في الباقة المجانية.
- «ℹ قيد بيئة المعاينة:» ليس خطأ في مشروعك. المعاينة تعمل في إطار معزول لا يشارك أصل المنصة، فبعض واجهات المتصفح العادية ترمي خطأ داخله. لا يظهر زرّ الإصلاح هنا لأن تعديل الكود لا يحلّه.
- مشروع يحتاج بيئة تشغيل: مشاريع مثل Next.js لا تُعرض مباشرة؛ تظهر بطاقة تشرح أن «المعاينة تحتاج بيئة تشغيل».
المعاينة داخل المحرر المرئي
في المحرر المرئي يصير رأس المعاينة «تحرير الصفحة»، ويُضاف أسفلها التكبير من 10٪ إلى 300٪ وأزرار الصفحات و«إضافة قسم». أحجام العرض الثلاثة نفسها متاحة هناك.
أسئلة شائعة
هل المعاينة هي الموقع المنشور نفسه؟
لا تماماً. المعاينة تعرض ما في المحرر الآن ومنه غير المحفوظ. أقرب شيء للمحفوظ هو «فتح في تبويب جديد»، والنشر نفسه في النشر.
لماذا لا أجد مقاس iPhone أو iPad محدداً؟
لأن المتاح الآن ثلاثة أحجام فقط: سطح المكتب و768 و375 بكسل. قائمة الأجهزة لم تُربط بالمعاينة بعد.
ظهرت رسالة «قيد بيئة المعاينة» — هل مشروعي معطوب؟
غالباً لا. هذه قيود الإطار المعزول، وقد يعمل الكود نفسه على الموقع المنشور.