بناء أداة إدارة داخلية
أطلق أداة داخلية في دقائق
كل فريق منتج لديه قائمة انتظار من طلبات «يجب أن يبني أحدهم لنا شاشة إدارة سريعة». بوصفك مدير منتج، لم تعد بحاجة إلى الانتظار في الطابور. مع الذكاء الاصطناعي وقليل من Tailwind، يمكنك بناء نموذج أولي للأداة الداخلية التي يحتاجها فريق العمليات لديك بالضبط.
في هذا الدرس ستبني لوحة إدارة أنيقة: جدول بيانات يعرض العناصر مع أزرار إجراءات، بالإضافة إلى نموذج بسيط لإضافة عنصر. هذا هو الأساس الذي تقوم عليه واجهات الأدوات الداخلية، وبمجرد أن تتمكن من رسمه بنفسك، يمكنك تسليم المهندسين نموذجًا أوليًا يعمل بدلًا من Figma مبهم.
ابقَ عمليًا. الأدوات الداخلية لا تحتاج إلى أن تكون جميلة — بل تحتاج إلى أن تكون واضحة وسريعة وقابلة للاستخدام من قِبل فريقك.
التعليمات
أضف عنوان صفحة (h1) بعنوان «لوحة إدارة المستخدمين» داخل div مركزي
تلميح: استخدم: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">لوحة إدارة المستخدمين</h1></div>`
أين أكتب هذا؟
<!-- ابنِ لوحة الإدارة هنا -->اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أضف جدول بيانات بأعمدة رأسية (الاسم، الدور، الإجراءات) وصف بيانات واحد على الأقل
أضف أزرار إجراءات للتعديل والحذف داخل صفوف الجدول
أضف نموذج «إضافة عنصر» يحتوي على حقول نصية وزر إرسال
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف عنوان صفحة (h1) بعنوان «لوحة إدارة المستخدمين» داخل div مركزي