عارض التطبيقات

يتم تحميل الموقع الإلكتروني، ويعمل عارض التطبيقات بشكل طبيعي، فقط امنحه لحظة. إذا استغرق الأمر أكثر من دقيقتين، فانقر على أيقونة التحديث أو تحقق من لوحة Console بحثاً عن الأخطاء.

قد يواجه الوكلاء مشكلات أثناء البناء، مما يتسبب أحياناً في أخطاء في صفحة الويب. انقر على Resolve وسيقوم الوكلاء بإصلاحها لك؛ وبمجرد الإصلاح، تعود المعاينة إلى وضعها الطبيعي. الرسائل الحمراء إشارة وليست أزمة.

تتطلب إزالة الشارة باقة Pro أو أعلى. انقر على صورتك الرمزية في الزاوية العلوية اليمنى، واختر Settings، ثم انتقل إلى Plans & Billing واختر باقة Pro أو Max. بمجرد الترقية، تتم إزالة شارة Atoms تلقائياً من صفحاتك المنشورة.

1. افتح وضع التصميم وحدد العنصر الدقيق غير المحاذى أو المنسق بشكل غير صحيح.
2. اذكر الصفحة ونقطة التوقف، والمشكلة الحالية، والنتيجة المطلوبة، وما الذي يجب ألا يتغير.
3. استخدم تعليمات قابلة للقياس مثل الحشو، والمحاذاة، والعرض، واللون، أو سلوك الالتفاف. أرفق صورة مرجعية عندما تكون المطابقة البصرية مهمة.
4. طبّق تغييراً واحداً، ثم تحقق من تخطيطات سطح المكتب والهاتف المحمول بالإضافة إلى الحالات المهمة مثل التحميل، والفراغ، والتحويم، والخطأ.
5. إذا أدت النتيجة إلى كسر منطقة أخرى، فارجع إلى آخر إصدار كان يعمل وأعد المحاولة بهدف أضيق.

1. تأكد مما إذا كانت المشكلة تؤثر فقط على عارض التطبيقات، أو على Preview URL، أو على الموقع المنشور أيضاً.
2. حدّث مرة واحدة، وافتح المعاينة في علامة تبويب جديدة، واختبر نافذة التصفح الخفي.
3. تحقق مما إذا كانت المهمة الحالية أو عملية البناء لا تزال قيد التشغيل. انتظر حتى تنتهي قبل إعادة المحاولة.
4. إذا كانت هناك رسالة صريحة تفيد بأن رصيد Cloud & AI غير كافٍ أو أن التطبيق موقوف، فافتح Settings → Cloud & AI وراجع ذلك الرصيد. لا تقم بإعادة الشحن بناءً على شاشة فارغة فقط.
5. سجّل أي خطأ في Console أو Network من دون مشاركة ملفات تعريف الارتباط أو الرموز المميزة أو القيم السرية.

إذا ظلت الشاشة فارغة، فاتصل بالدعم مع Chat Link، و Viewer URL الكامل، والوقت والمنطقة الزمنية، والبيئات المتأثرة، ولقطة شاشة، وتفاصيل الخطأ المنقحة.

1. تحقق مما إذا كان المتأثر هو عارض التطبيقات فقط، أو Preview URL، أو الموقع المنشور.
2. حدّث مرة واحدة، وافتح المعاينة في علامة تبويب جديدة، واختبر نافذة التصفح الخفي.
3. تحقق مما إذا كانت المهمة الحالية أو عملية البناء لا تزال قيد التشغيل وانتظر حتى تنتهي.
4. اختبر آخر إصدار معروف بأنه يعمل. إذا كان يعمل، فقارن التغيير الأخير الذي تسبب في ظهور الشاشة الفارغة.
5. افتح Settings → Cloud & AI فقط عندما يبلّغ المنتج صراحةً عن رصيد غير كافٍ أو تطبيق موقوف.

إذا استمرت المشكلة، فاتصل بالدعم مع Chat Link، و Viewer URL الكامل، والإصدار، والوقت والمنطقة الزمنية، والبيئات المتأثرة، ولقطة شاشة، وخطأ Console أو Network بعد تنقيحه.

المعاينة والموقع المنشور قناتان مستقلتان. الحفظ أو المعاينة لا يدفعان التغييرات إلى الإنتاج.

1. انقر على Update في لوحة Publish — افتح لوحة Publish وانقر على Update. انتظر حتى تعرض الحالة Up to date.
2. أجرِ تحديثاً كاملاً للموقع المباشر — اضغط Cmd+Shift+R (Mac) أو Ctrl+F5 (Windows)، أو افتح الرابط في نافذة تصفح خفي لاستبعاد ذاكرة التخزين المؤقت للمتصفح.
3. تحقق من رقم الإصدار المنشور — في لوحة Publish، تأكد من أن الإصدار يطابق ما تراه في المعاينة. إذا اختلفا، فأعد النشر.
4. اختبر النطاق الفرعي Prod الخاص بالمنصة — إذا كنت تستخدم نطاقاً مخصصاً، فافتح عنوان Prod الافتراضي بشكل منفصل. إذا كان النطاق الفرعي Prod محدثاً بينما النطاق المخصص ليس كذلك، فالمشكلة تتعلق بـ DNS أو التخزين المؤقت لـ CDN.

إذا استمرت المشكلة، فزوّدنا بـ Preview URL و Prod URL ولقطات شاشة للمقارنة جنباً إلى جنب والوقت الذي نقرت فيه على Publish أو Update.

عندما يعدّل Agent التخطيط أو التنسيق، فقد يؤدي ذلك عن غير قصد إلى كسر السلوك المتجاوب على الشاشات الأصغر.

1. عاين بعرض الهاتف المحمول أولاً — استخدم مبدّل الجهاز في شريط أدوات عارض التطبيقات للتبديل إلى عرض الهاتف المحمول والتحقق من النتيجة قبل النشر.
2. استخدم وضع التصميم في عرض الهاتف المحمول — بدّل إلى وضع التصميم بينما يكون مبدّل الجهاز مضبوطاً على الهاتف المحمول. انقر على العنصر المعطّل حتى يستهدف Agent ذلك المكوّن فقط عند حجم الشاشة هذا.
3. قدّم قيوداً متجاوبة صريحة — أخبر Agent بالضبط كيف يجب أن يبدو تخطيط الهاتف المحمول. مثال: "على الشاشات الأضيق من 768px، رتّب البطاقات في عمود واحد واضبط الحشو على 16px."
4. اطلب من Agent الحفاظ على استعلامات الوسائط الحالية — عند طلب تغييرات لسطح المكتب، أضف: "لا تعدّل أي أنماط متجاوبة أو أنماط هاتف محمول موجودة."

إذا استمرت المشكلة، فزوّدنا بـ Chat Link ولقطة شاشة لتخطيط الهاتف المحمول المعطّل وصورة مرجعية للتخطيط المتوقع.

إذا بدت الصور معطلة، أو أظهرت أيقونات نائبة، أو فشلت في التحميل:

1. تحقق من مسارات ملفات الصور — افتح قسم Files وتأكد من وجود ملفات الصور في المسارات المشار إليها في الكود. ربما قام Agent بنقل الملفات أو إعادة تسميتها أثناء التعديلات.
2. تحقق من حجم الملف والتنسيق — قد تفشل الصور الكبيرة جداً أو التنسيقات غير المدعومة في التحميل. اضغط الصور أو حوّلها إلى PNG أو JPG أو WebP.
3. تحقق من التخزين السحابي — انتقل إلى Settings > Cloud & AI للتأكد من توفر مساحة تخزين لديك.
4. أجرِ تحديثاً كاملاً — اضغط Cmd+Shift+R (Mac) أو Ctrl+F5 (Windows) لمسح مراجع الصور المخزنة مؤقتاً.

إذا استمرت المشكلة، فزوّدنا بـ Chat Link ورابط الصورة المفقودة ولقطة شاشة للحالة المعطلة.

عندما يعدّل Agent عناصر غير ذات صلة أو يُدخل تراجعات في أجزاء أخرى من الصفحة:

1. تراجع — انتقل إلى History ونفّذ ريمكس من آخر إصدار مستقر. يؤدي هذا إلى إعادة تعيين سياق الدردشة مع الحفاظ على الكود الخاص بك.
2. استخدم وضع التصميم للعزل — بدّل إلى وضع التصميم وانقر مباشرة على العنصر المحدد. يثبت هذا نطاق تعديل Agent على ذلك المكوّن.
3. أضف قيوداً صريحة — اذكر بوضوح ما الذي يجب ألا يتغير. مثال: "غيّر فقط لون خلفية الترويسة إلى #1A365D. لا تعدّل شريط التنقل أو التذييل أو أي مكوّن آخر."
4. تغيير واحد لكل Prompt — نفّذ تغييراً واحداً، وتحقق من النتيجة، ثم انتقل إلى التالي.

إذا استمر Agent في إحداث تراجعات في عناصر أخرى، فنفّذ ريمكس من إصدار مستقر وأعد المحاولة بتعليمات محددة بإحكام.

إذا كانت لوحة المعاينة تعرض خطأ في البناء، أو شريط خطأ أحمر، أو رسالة حول حزم مفقودة:

1. استخدم زر Resolve — إذا ظهر إشعار الإبلاغ عن مشكلة في عارض التطبيقات، فانقر على Resolve وسيقوم الذكاء الاصطناعي بتحليل جميع الأخطاء المحددة وإصلاحها تلقائياً. إذا لم يظهر زر Resolve، فانسخ رسالة الخطأ الدقيقة من لوحة Console والصقها إلى Agent مع: "أصلح خطأ البناء هذا: [error message]."
2. تحقق من التغييرات الأخيرة — إذا ظهر الخطأ بعد تعديل محدد، فانتقل إلى History وقارن مع آخر إصدار كان يعمل لتحديد التغيير الذي تسبب في العطل.
3. نفّذ ريمكس من آخر إصدار كان يعمل — إذا كان حل الخطأ صعباً، فنفّذ ريمكس من آخر نقطة تحقق ناجحة وأعد تطبيق التغييرات تدريجياً.
4. تحقق من توافق الحزمة — إذا كان الخطأ يشير إلى حزمة محددة، فاطلب من Agent: "تحقق مما إذا كانت [package name] متوافقة مع إعداد المشروع الحالي وأصلح أي تعارضات في الإصدارات."

ملاحظة: إذا كانت رسالة الخطأ تشير إلى مكونات المنصة (عارض التطبيقات، أو نص بدء التشغيل، أو Publish، أو سجل النشر) أو إلى ملفات داخلية لحزمة خارجية (مثل @vue/compiler-core أو vite)، فقد تكون هذه مشكلة في المنصة وليست مشكلة في Agent. اتصل بالدعم مع رسالة الخطأ الكاملة.

إذا استمرت المشكلة، فزوّدنا برسالة الخطأ الكاملة، و Chat Link، ولقطة شاشة للخطأ.

إذا أكد Agent أن التغيير قد تم لكن النتيجة المرئية لم تتغير:

1. أجرِ تحديثاً كاملاً — اضغط Cmd+Shift+R (Mac) أو Ctrl+F5 (Windows). غالباً ما يتم تخزين تغييرات CSS مؤقتاً بواسطة المتصفح.
2. تحقق من تعارضات أولوية CSS — ربما أضاف Agent أنماطاً يتم تجاوزها بواسطة قواعد موجودة. اطلب من Agent: "تحقق مما إذا كان النمط الذي طلبته يتم تجاوزه بواسطة قاعدة CSS أخرى، وأصلح الأولوية إذا لزم الأمر."
3. استخدم وضع التصميم للفحص — بدّل إلى وضع التصميم وانقر على العنصر. يعرض المحرر المرئي على اليسار الألوان والتباعد والطباعة وخصائص التخطيط المطبقة حالياً، حتى تتمكن من معرفة ما إذا كان التغيير المطلوب قد تم تطبيقه.
4. تحقق من الملف الصحيح — في المشاريع التي تحتوي على أوراق أنماط عامة وأنماط على مستوى المكوّن، ربما عدّل Agent الملف الخطأ. اسأل: "أين طبّقت التغيير؟ أرني مسار الملف والسطر."

إذا استمرت المشكلة، فزوّدنا بـ Chat Link ولقطة شاشة للعنصر الذي لم يتغير وقيم النمط الدقيقة التي طلبتها.

يستخدم وضع التصميم التخطيط المرئي لتحديد المكوّن الذي تستهدفه. قد تتسبب العناصر المتداخلة أو المتراكبة في تحديد غير صحيح.

1. كبّر — كبّر المنطقة قبل النقر. يساعد ذلك على التمييز بين المكوّنات المتداخلة بشكل وثيق.
2. استخدم الوصف النصي كخيار احتياطي — إذا كان النقر المتكرر يحدد العنصر الخطأ، فصفه في الدردشة بدلاً من ذلك. مثال: "حدد الزر الثاني داخل بطاقة التسعير في العمود الأيمن."
3. أشر إلى مسار الملف — إذا كنت تعرف الملف الذي يحتوي على المكوّن، فأخبر Agent مباشرة: "حرّر العنصر في src/components/PricingCard.tsx، السطر 42."

إذا استمرت مشكلات التحديد، فزوّدنا بلقطة شاشة توضح العنصر الذي تريده و Chat Link.