محرر اللوحة
لوحة تحرير الإطار الشبكي هي حيث تصمم وتنقح شاشاتك. الشريط الجانبي الأيسر يحتوي على جميع أدوات الرسم والتحديد، والمركز هو اللوحة حيث تضع وترتب العناصر، والشريط الجانبي الأيمن يعرض خصائص العنصر المحدد.
الأدوات
تحديد
انقر لتحديد ونقل العناصر على اللوحة. العناصر المحددة تعرض خصائصها في الشريط الجانبي الأيمن.
مربع
ارسم عناصر حاوية مستطيلة على اللوحة.
دائرة
ارسم عناصر دائرية على اللوحة.
نص
أضف تسميات نصية وكتل محتوى.
صورة
ضع عناصر عنصر نائب للصور.
زر
أضف عناصر أزرار تفاعلية.
حقل إدخال
أضف حقول إدخال النماذج.
+ (إضافة شاشة)
أضف شاشة جديدة لمشروع الإطار الشبكي.
العناصر المقفلة
الشاشات المولدة بالذكاء الاصطناعي تأتي مقفلة افتراضياً — العناصر لا يمكن نقلها أو تغيير حجمها حتى يتم فتحها. اضغط Ctrl + D لفتح جميع العناصر في الشاشة الحالية، مما يمنحك تحكماً كاملاً لإعادة ترتيبها وتحريرها.
وضع لوحة القصة
وضع لوحة القصة يتيح لك رؤية جميع إطاراتك ونقاط اتصالها في عرض بانورامي. بدّل بين لوحة الشاشة الواحدة ووضع لوحة القصة باستخدام نفس الزر في الشريط الجانبي الأيسر. في وضع لوحة القصة، تُعرض كل شاشة كبطاقة مع معاينة لتصميمها.
ميزات لوحة القصة
نظرة عامة على الإطارات
شاهد جميع الشاشات بنظرة مع أعداد عناصرها ومعاينات مرئية.
تحديد كنافذة منبثقة
علّم أي شاشة كطبقة نافذة منبثقة بدلاً من صفحة كاملة.
انقر للتحرير
انقر على أي بطاقة إطار للذهاب إلى عرض اللوحة الخاصة بها للتحرير التفصيلي.
عناصر تحكم التكبير
استخدم عناصر تحكم التكبير على اليسار لتكبير/تصغير لوحة القصة.
اتصالات التدفق
تصور كيف ترتبط الشاشات ببعضها عبر إجراءات التدفق بين الإطارات.
خصائص العنصر
انقر مزدوجاً على أي عنصر لوحة للدخول إليه وفتح لوحة خصائصه في الشريط الجانبي الأيمن. اللوحة بها ثلاثة تبويبات: الخصائص والتدفق والألوان. من هنا يمكنك تحرير الموقع والحجم والنمط والسلوك لكل عنصر.
تبويب الخصائص
الموقع (X, Y)
حدد الموقع الدقيق بالبكسل للعنصر على اللوحة.
الحجم (العرض، الارتفاع)
حدد أبعاد العنصر بالبكسل.
مؤشر Z (ترتيب الطبقات)
تحكم في أي العناصر تظهر فوق الأخرى.
نصف قطر الحد
حدد تدوير الزوايا بقيمة رقمية أو استخدم الإعدادات المسبقة حاد أو مدور أو حبة.
محتوى النص
حرر النص المعروض داخل العنصر.
تبويب الألوان
خصص ألوان الخلفية والحد والنص للعنصر المحدد.
التدفقات
التدفقات تحدد الإجراءات والتنقل بين الشاشات. التدفق هو إجراء مثل التنقل إلى صفحة أخرى أو فتح نافذة منبثقة أو التوجه إلى منطقة مختلفة. أيقونات ربط صغيرة على اللوحة تشير إلى العناصر التي لها تدفقات مرفقة. الإطارات تُربط ببعضها تلقائياً أثناء التوليد بالذكاء الاصطناعي، واتصالات التدفق تُنشأ أيضاً.
إعداد التدفقات
تحديد عنصر
انقر على العنصر الذي تريد إضافة تدفق إليه.
فتح تبويب التدفق
في الشريط الجانبي الأيمن، بدّل إلى تبويب التدفق لعرض الاتصالات الحالية أو إضافة جديدة.
إضافة اتصال
انقر على إضافة أول اتصال (أو زر +) لإنشاء تدفق جديد. اختر شاشة أو إطار وجهة للربط.
العرض على اللوحة
العناصر المتصلة تعرض أيقونة ربط صغيرة على اللوحة للإشارة إلى أن لها إجراءات تدفق.
اتصالات الكتل
اتصالات الكتل تتيح لك إرفاق كتل من مكتبة الكتل مباشرة بعناصر الإطار الشبكي. عند النقر المزدوج على عنصر والتمرير لأسفل في لوحة الخصائص، ستجد قسم اتصالات الكتل. انقر على + إضافة كتلة لربط كتلة (HTML أو مكون أو قالب) بالعنصر. الكتل المتصلة يُرجع إليها عند توليد الكود بالذكاء الاصطناعي، مما يسهل إرفاق كود HTML أو مكونات محددة بعناصر الإطار الشبكي.
التحرير بالذكاء الاصطناعي
شريط أوامر الذكاء الاصطناعي أسفل اللوحة يتيح لك استخدام الذكاء الاصطناعي لتحرير أو إنشاء الشاشات. حدد نموذج الذكاء الاصطناعي من القائمة المنسدلة على اليسار، وصف التغييرات التي تريدها وسيعدل الذكاء الاصطناعي الإطار الشبكي نيابة عنك. يمكنك أيضاً استخدام الإدخال الصوتي أو زر تحرير CLI للتحرير المتقدم.
أوامر مدركة للسياق
شاشة واحدة
عند تحرير شاشة واحدة، يعرض شريط الأوامر "تحرير 'اسم الشاشة'" وتغييرات الذكاء الاصطناعي تُطبق على تلك الشاشة فقط.
لوحة القصة
في وضع لوحة القصة، يمكن للذكاء الاصطناعي تحرير جميع الإطارات دفعة واحدة أو بناء إطارات جديدة باستخدام الموجودة كمرجع.
الإدخال الصوتي
استخدم أيقونة الميكروفون في شريط الأوامر لإملاء تعليماتك بدلاً من كتابتها.
تحرير CLI
انقر على تحرير CLI لوضع تحرير متقدم مع مزيد من التحكم في التغييرات المدفوعة بالذكاء الاصطناعي.
التصدير والتكامل
يمكن تصدير أو استيراد أو استخدام الإطارات الشبكية مباشرة عند إنشاء المشاريع أو داخل مركز المشاريع. هذا يسهل الانتقال من تصميم الإطار الشبكي إلى مشروع وظيفي دون إعادة إنشاء التصاميم يدوياً.