المحرر المرئي والمعاينة

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

استخدم Select element لإجراء تغييرات بمساعدة الذكاء الاصطناعي، وEdit Text لإجراء تغييرات مباشرة على النص، وTheme للأنماط العامة مثل الألوان والخطوط والتأثيرات.

كيف يعمل التحرير المرئي

عندما يُكمل وكلاء الذكاء الاصطناعي مهمة، يظهر عارض التطبيقات في أعلى المشروع. يوجد شريط أدوات التحرير المرئي أسفل المعاينة.

• يتيح لك Select element تحديد عنصر واحد أو أكثر وطلب تعديلها من الوكلاء.
• يتيح لك Edit Text تعديل النص مباشرةً داخل المعاينة.
• يفتح Theme عناصر التحكم الخاصة بالسمة للأنماط العامة.

يمكن طي شريط الأدوات عندما لا تحتاج إليه.

قبل أن تبدأ

قبل أن تبدأ التحرير، تأكد مما يلي:

• يحتوي مشروعك على إصدار مكتمل. تتوفر أدوات التحرير المرئي من عارض التطبيقات بعد أن ينهي الوكلاء مهمة.
• أنت تعلم أن التغييرات لن تصبح مباشرة حتى تقوم بالنشر. لن يتأثر عنوان URL العام الخاص بك حتى تنشر الإصدار المحدّث.
• أنت تعلم أن السمة تصل فقط إلى الأنماط المشتركة. العناصر التي تم إنشاؤها بقيم ثابتة تحتفظ بمظهرها القديم بعد تغيير السمة. راجع إذا لم تبدُ السمة صحيحة أدناه.

تعيين الأنماط العامة باستخدام Theme

السمة هي نظام التصميم الخاص بمشروعك. فهي تحدد المتغيرات العامة — لوحات الألوان، والطباعة، والتباعد — التي تُطبَّق على تطبيقك بالكامل، بدلًا من إعدادات عنصر واحد.

من الأفضل استخدام Theme خلال مرحلة التحضير، قبل أن تبدأ البناء. فتطبيق سمة مبكرًا يعني أن كل ما ينشئه الوكلاء سيتبعها منذ البداية.

اختيار سمة

حدد Theme من شريط الأدوات أسفل عارض التطبيقات. تتضمن لوحة Theme حقل Search Themes وتجمع السمات في أقسام:

• Current Theme — ما يستخدمه مشروعك الآن. قبل أن تطبق أي شيء، يظهر النص No theme applied yet ، ويؤدي زر + بجواره إلى إنشاء سمة جديدة.
• Featured Theme — 15 إعدادًا مسبقًا منسقًا من مصممين. يظهر كل منها كمعاينة لصفحة تم إنشاؤها بها، مع اسمها وصف من العينات اللونية التي تعرض لوحتها. لا يمكن حذف هذه السمات.
• Your Theme — السمات التي أنشأتها أو خصصتها. يمكن إعادة تسمية هذه السمات وحذفها.

تظهر كل سمة كمعاينة لصفحة تم إنشاؤها بها، مع اسمها وصف من العينات اللونية التي تعرض لوحتها، حتى تتمكن من تقييم الاتجاه قبل تطبيقها.

تبويب Theme، مع سمة مطبقة في الأعلى والسمات المحفوظة الخاصة بك أسفلها.

لتطبيق واحدة:

1. حدد السمة التي تريدها.
2. تسأل Atoms "Do you want to apply theme name?"
3. حدد Apply للتأكيد، أو Cancel للرجوع.
4. تحقق من المعاينة.

النتيجة المتوقعة: يتم تحديث المعاينة إلى السمة التي اخترتها، وتظهر الآن ضمن Current Theme.

ملاحظة: إذا كانت لديك تغييرات غير محفوظة على النص أو الصور، فستطلب Atoms منك حفظها أو تجاهلها قبل تطبيق سمة جديدة.

تحديث سمة مطبقة

تعني النقطة الموجودة على تبويب Theme أن إصدارًا أحدث من السمة المطبقة لديك متاح.

لاستخدامه، حدد Update على السمة الحالية وأكّد Do you want to re-apply theme name? بعد ذلك سيستخدم مشروعك الإصدار الأحدث.

لست مضطرًا إلى التحديث. إذا تركته كما هو، فسيستمر مشروعك في استخدام الإصدار الذي طبقته.

ملاحظة: ملاحظة: إذا لم يكن تطبيقك يبدو مثل السمة التي حددتها، فقد تكون بعض العناصر تحتوي على أنماط تتجاوز السمة. تستهدف هذه التجاوزات محتوى محددًا وتبقى بعد تغيير السمة.

إنشاء سمة أو تعديلها في Theme Manager

حدد + بجوار Current Theme لإنشاء سمة من الصفر، أو افتح سمة موجودة لتغييرها. في كلتا الحالتين سيتم فتح Theme Manager ، حيث يمكنك ضبط السمة بدقة مقابل معاينة مباشرة.

تقع إعداداته ضمن ثلاثة تبويبات:

• Color — أدوار الألوان التي يستخدمها تطبيقك، مجمعة حسب الغرض: Base Colors وCard وPopover وPrimary وSecondary والمزيد. لكل دور قيمته الخاصة، لذا فإن تغيير Primary يصل إلى كل عنصر يستخدمه.
• Fonts — الخطوط Serif وSans-serif وMono الخاصة بك.
• Effects — Radius للزوايا، وShadow يمكنك التحكم فيه من خلال اللون، والعتامة، والتمويه، والانتشار، والإزاحة.

المعاينة الموجودة بجانبها مبنية من مكونات حقيقية — نماذج تسجيل الدخول، والأزرار، وحقول الإدخال، ونص المتن، والنص أحادي المسافة — حتى تتمكن من تقييم التغيير فورًا بدلًا من التخمين. استخدم مفتاح التبديل بين الوضع الفاتح والداكن أسفلها للتحقق من كليهما، لأن لوحة ألوان تعمل جيدًا على الأسطح الفاتحة قد تفقد التباين على الأسطح الداكنة.

أسفل المعاينة، ستحصل أيضًا على Undo وRedo للتنقل بين تغييراتك، وReset لإعادة السمة إلى حالتها الأصلية.

Theme Manager. يتم تحديث المعاينة عند تغيير أي قيمة، وتغطي عناصر التحكم الموجودة أسفلها التراجع، والإعادة، والتصدير، والاستيراد، وإعادة التعيين.

حفظ سمة

1. حدد Save.
2. امنحها Theme Name ، أو احتفظ بالاسم المقترح.
3. حدد Save للتأكيد.

النتيجة المتوقعة: تظهر السمة الخاصة بك ضمن My Theme في تبويب Theme، مع عرض لوحتها على شكل عينات لونية. طبّقها بالطريقة نفسها مثل أي سمة أخرى.

ملاحظة: لا يتم الاحتفاظ بالتعديلات حتى تحفظها. ستمنعك Atoms وتعرض عليك الحفظ أو التجاهل إذا حاولت تطبيق سمة مختلفة بينما لا تزال هناك تغييرات غير محفوظة.

إعادة استخدام سمة عبر المشاريع

يحتوي Theme Manager على Export وImport أسفل المعاينة. صدّر سمة إلى ملف، ثم استوردها إلى مشروع آخر لإعادة استخدام نفس الاتجاه التصميمي، أو شاركها مع زميل في الفريق حتى يتطابق مشروعه مع مشروعك.

إذا لم تبدُ السمة صحيحة

تطبيق السمة ليس فحص توافق، لذلك فهو لا يفشل عادةً. تستبدل السمة قيم الأنماط المشتركة التي بُني عليها تطبيقك، ما يعني أن أي سمة في أداة الاختيار يمكن عادةً تطبيقها على أي مشروع.

ما قد تراه بدلًا من ذلك هو سمة يتم تطبيقها بنجاح لكنها لا تصل إلى كل شيء. لا توجد رسالة خطأ لهذا — بل يبدو الأمر ببساطة غير صحيح.

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

يصبح النص صعب القراءة. قد يؤدي تطبيق سمة داكنة على تخطيط صُمم لأسطح فاتحة إلى جعل تباين النص منخفضًا جدًا. عدّل العناصر المتأثرة في المحرر المرئي، أو اختر سمة أقرب إلى تصميمك الحالي.

تخبرك Atoms بأنه لا يمكن تطبيق السمة. هذا غير شائع، ويعني أن واجهة مشروعك لم تُبنَ على نظام السمات الخاص بـ Atoms. استخدم المحرر المرئي بدلًا من ذلك — فما زال بالإمكان إنجاز كل شيء عنصرًا بعنصر.

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

تعديل العناصر باستخدام المحرر المرئي

1. مرر المؤشر فوق شريط أدوات التحرير المرئي وحدد Select element.
2. يعرض شريط الأدوات Click to select, Ctrl/Cmd + Click for multiple.
3. حدد عنصرًا في المعاينة. لتحديد عدة عناصر، اضغط باستمرار على Ctrl في Windows أو Cmd في Mac أثناء التحديد.
4. يتم إرفاق العناصر التي حددتها بدردشة المشروع. يعرض شريط الأدوات عدد العناصر المحددة، مثل Edit 1 selection in chat window.
5. صف التغيير الذي تريده في دردشة المشروع وأرسل رسالتك.
6. حدد Select element مرة أخرى للخروج من وضع التحديد.

استخدم دردشة المشروع لإجراء تغييرات مثل التخطيط، والألوان، والتباعد، والتنسيق، أو التغييرات التي تؤثر على عدة عناصر محددة.

تعديل النص مباشرةً

1. حدد Edit Text من شريط الأدوات أسفل عارض التطبيقات.
2. عندما يظهر Click text content to edit ، حدد النص الذي تريد تغييره.
3. عدّل النص مباشرةً داخل المعاينة.
4. يمكنك تعديل عدة عناصر نصية قبل الحفظ. يعرض شريط الأدوات عدد التعديلات المعلقة، مثل 1 text change أو 2 text changes.
5. حدد Save للاحتفاظ بجميع تغييرات النص المعلقة، أو Discard لإزالتها.

يمكنك أيضًا النقر نقرًا مزدوجًا على النص أثناء استخدام Select element لبدء تعديله مباشرةً.

احفظ تغييراتك أو تجاهلها

لا يتم تطبيق التغييرات المباشرة على النصوص والصور حتى تحفظها. عند وجود تغييرات معلقة، يعرض شريط الأدوات عدد التغييرات مع Discard وSave.

• Save يطبق جميع التعديلات المباشرة المعلقة.
• Discard يزيل التعديلات المعلقة ويعيد العناصر المتأثرة إلى حالتها السابقة.

إذا حاولت مغادرة وضع التعديل مع وجود تغييرات معلقة، فستعرض Atoms:

تغييرات غير محفوظة

لديك تغييرات غير محفوظة. يرجى حفظ التغييرات أو تجاهلها قبل مغادرة وضع التعديل.

حدد Cancel لمتابعة التعديل أو Discard للمغادرة بدون الاحتفاظ بالتغييرات.

يؤدي الحفظ إلى تحديث مشروع العمل. لكنه لا يحدّث الموقع المباشر حتى تقوم بالنشر.

استبدال صورة

1. ادخل إلى وضع Select element.
2. حدد الصورة التي تريد استبدالها.
3. اختر صورة من مكتبة الصور، أو استخدم عنصر التحكم في الرفع على الصورة المحددة.
4. تحقق من الاستبدال في المعاينة.
5. حدد Save لتطبيق تغيير الصورة، أو Discard لإزالته.

إذا أدخلت أيضًا تعليمات في دردشة المشروع، فيمكن إرسال استبدال الصورة وتعليمات الدردشة معًا.

تبويب Library مع فئات الصور وPopular Images.

من أين تأتي الصور

Image هي المجموعة المضمنة. استخدم Search assets لشيء محدد، أو تصفح فئة — Backgrounds وNature وEducation وHealth وFashion وScience وFeelings وPeople، مع More tags للباقي. يؤدي تحديد فئة إلى فتحها؛ استخدم سهم الرجوع للعودة. يعرض Popular Images أدناه مجموعة عامة. مرر المؤشر فوق أي صورة وحدد Use asset لتطبيقها.

Generate ينشئ صورة جديدة من وصف، ويتطلب باقة Pro أو Max. اكتب ما تريده تحت Describe the image you want to generate وحدد Generate. تظهر النتائج أسفل الحقل. حدد صورة مصغرة مكتملة لتطبيقها على العنصر الخاص بك.

Upload يضيف ملفك الخاص عبر السحب والإفلات، أو اللصق، أو النقر. يمكن أن تكون الصور بتنسيقات JPEG أو PNG أو GIF أو BMP أو TIFF أو WEBP، وبحجم يصل إلى 4MB. تظهر الصور المرفوعة أسفل منطقة الإفلات — حدد واحدة لتطبيقها.

ملاحظة: يظهر Use asset على الصور المضمنة فقط. أما الصور التي تنشئها أو ترفعها، فيتم تطبيقها من خلال تحديد صورتها المصغرة بدلًا من ذلك.

وصف التغييرات في الدردشة

بعد تحديد عنصر واحد أو أكثر باستخدام Select element ، صف النتيجة التي تريدها في دردشة المشروع.

على سبيل المثال:

• "اجعل هذا القسم أكثر هدوءًا، مع مساحة بيضاء أكبر وعنوان أصغر."
• "طابق تنسيق هذه الأزرار مع التنسيق الموجود في صفحة الأسعار."

كن محددًا بشأن النتيجة المقصودة. قد تؤدي التعليمات مثل "اجعله يبدو أفضل" إلى نتائج غير متوقعة

معاينة تغييراتك

استخدم شريط الأدوات أعلى المعاينة:

• Device view — بدّل بين أحجام الشاشات لاختبار الاستجابة. غالبًا ما تبدو تغييرات السمة والطباعة صحيحة على سطح المكتب لكنها تتعطل على الهاتف المحمول، لذا تحقق دائمًا من الهاتف المحمول قبل النشر.
• Page selector — تنقل بين صفحات تطبيقك.
• Refresh — أعد تحميل المعاينة إذا بدت قديمة.
• Open in a new tab — اعرض التطبيق بعرض كامل في تبويب متصفح منفصل.
• Console — افتح لوحة السجل عندما يبدو شيء ما غير صحيح.

النتيجة المتوقعة: تكون تغييراتك مرئية في كل صفحة وعند كل عرض جهاز تنوي دعمه.

التعافي من مشكلة في المعاينة

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

إذا بدا أن تعديلاتك المباشرة على النص أو الصور قد اختفت، فتحقق مما إذا كنت قد حفظتها. يمكن تجاهل التغييرات غير المحفوظة عند مغادرة وضع التعديل — راجع حفظ تغييراتك أو تجاهلها.

نشر تغييراتك

تبقى التعديلات المرئية في مشروع العمل الخاص بك حتى تقوم بالنشر. حدد Publish في الزاوية العلوية اليمنى، أو Update إذا كان المشروع مباشرًا بالفعل.

ملاحظة: إذا كان مشروعك يستخدم Specify Version بدلًا من Always Latest ، فسيظل الموقع المباشر مقيدًا بالإصدار الذي اخترته، ولن تظهر تغييرات التصميم الخاصة بك للعامة حتى تنشر إصدارًا جديدًا.

بالنسبة إلى الأخطاء التي يبلغ عنها الوكلاء أثناء الإنشاء، راجع الإبلاغ عن مشكلة.