flowbite astro admin dashboard
1.0.0
هذا المشروع عبارة عن قالب لوحة معلومات مسؤول واجهة مستخدم مجاني ومفتوح المصدر تم إنشاؤه باستخدام مكونات من Flowbite ويعتمد على إطار عمل Tailwind CSS الأول للأداة المساعدة والذي يتميز بالمخططات والجداول وعناصر واجهة المستخدم وتخطيطات CRUD والنماذج والأدراج والمزيد.
يمكن أن تساعدك لوحة التحكم الإدارية هذه بسرعة على البدء في إنشاء تطبيق لمشروعك باستخدام أحدث تقنيات تطوير واجهة المستخدم/UX في المنطقة مفتوحة المصدر بما في ذلك Tailwind CSS وFlowbite.
| لوحة القيادة | تخطيط مكدس | المنتجات (الخام) |
|---|---|---|
| المستخدمون (CRUD) | إعدادات | صفحة التسعير |
|---|---|---|
| صفحة تسجيل الدخول | صفحة التسجيل | إعادة تعيين كلمة المرور |
|---|---|---|
| هل نسيت كلمة السر | قفل الملف الشخصي | صفحة الصيانة |
|---|---|---|
| 404 غير موجود | 500 خطأ في الخادم | ملعب |
|---|---|---|
تعتمد المكونات التفاعلية مثل أشرطة التنقل والنماذج والأدراج وتلميحات الأدوات على مكتبة المكونات الشائعة مفتوحة المصدر والتي تسمى Flowbite والتي تمكننا من استخدام هذه العناصر عن طريق إنشاء مجموعة أكثر تعقيدًا من الصفحات وعناصر واجهة المستخدم داخل لوحة تحكم إدارية كاملة نموذج.
تعتمد جميع الصفحات والأدوات والمكونات فقط على فئات الأداة المساعدة الأولى من Tailwind CSS وهي متوافقة مع الإصدار v3.x الأحدث من التقنية عن طريق إزالة جميع الفئات تلقائيًا استنادًا إلى مسارات القالب.
ابدأ باستخدام 15 صفحة من الأمثلة المتقدمة بما في ذلك تخطيطين مختلفين للصفحة الرئيسية للوحة المعلومات المليئة بأدوات المخططات والجداول ومنتقيات البيانات والإحصائيات وأيضًا مع صفحتي تخطيط CRUD للمنتجات والمستخدمين وصفحة الإعدادات وصفحات المصادقة لتسجيل الدخول والتسجيل وحتى صفحات الخطأ 404 و500 المخصصة.
تحتوي لوحة تحكم المشرف هذه على العديد من المكونات المتقدمة من Flowbite وأيضًا من مكتبات الطرف الثالث الأخرى مثل ApexCharts التي تم تصميمها خصيصًا مع فئات Tailwind CSS وتم تصميمها استنادًا إلى نظام تصميم Flowbite.
إذا كنت تريد استخدام هذا المشروع، نوصي أيضًا بدراسة مكتبة المكونات التي استخدمناها لإنشاء لوحة المعلومات هذه لأنه يمكنك استخدام المزيد من المكونات من تلك المكتبة لتحسين الأمثلة التي قمنا بترميزها هنا بالفعل.
تم تصميم هذا المنتج باستخدام التقنيات التالية المستخدمة على نطاق واسع:
package.json : pnpm install
# or
npm install
# or
yarnPNPM هو مدير الحزم المفضل للتوضيح، ولكن يمكنك استخدام ما تريد.
localhost:2121 عن طريق تشغيل الأمر التالي: pnpm run dev يمكنك أيضًا إنشاء المشروع والحصول على ملفات التوزيع داخل مجلد dist/ عن طريق تشغيل:
pnpm run buildبعد ذلك، يمكنك معاينة الإصدار الذي تم إنشاؤه باستخدام خادم ويب محلي:
pnpm run previewللنشر، راجع سير عمل GitHub، حيث يمكنك توصيل هدفك (الذي تم تكوينه مسبقًا لصفحات GitHub). راجع docs.astro.build/en/guides/deploy
تم تكوين موقع الويب للنشر الثابت، ولكن يمكنك قلبه إلى العرض من جانب الخادم بمجرد إلغاء التعليق على output: "server" في ./astro.config.mjs .
بعد استنساخ هذا المستودع، ستجد البنية (المبسطة) التالية:
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
لقد تم بذل الجهود من أجل الإعداد السريع وتجربة المطورين .
يأتي هذا المشروع مع دعم واسع النطاق لـ TypeScript وAstro وTailwind وVS Code.
تم تكوينه باستخدام إعدادات افتراضية معقولة، وقليل من الآراء، بالإضافة إلى بعض الحيل لجعلها تعمل بشكل جيد معًا.
astro-eslint-parser + eslint-plugin-astroprettier-plugin-astro (مجمعة مع astro )لا تتردد في اختراق هذه الإعدادات لتلبية احتياجاتك الخاصة.
في الوقت الحالي، نهدف رسميًا إلى دعم الإصدارين الأخيرين من المتصفحات التالية:
المعاينة المباشرة: https://themesberg.github.io/flowbite-astro-admin-dashboard/
وثائق فلوبيت: https://flowbite.com/docs/getting-started/introduction/
وثائق Tailwind CSS: https://tailwindcss.com/
اتفاقية الترخيص: https://flowbite.com/docs/getting-started/license/
القضايا: صفحة قضايا جيثب
فيما يلي قائمة بالتقنيات والأدلة المتوافقة مع Flowbite وTailwind CSS:
قام المجتمع الرائع مفتوح المصدر أيضًا ببناء المكتبات المستقلة التالية لـ React وVue وSvelte وAngular ويحافظ عليها حاليًا:
لقد كتبنا أيضًا أدلة تكامل لأطر العمل والمكتبات الأمامية التالية:
يتمتع Flowbite بتكامل رائع مع معظم أطر العمل الخلفية لأنه يعتمد على Vanilla JavaScript:
نحن نستخدم مشكلات GitHub باعتبارها أداة تعقب الأخطاء الرسمية للوحة تحكم Flowbite Admin. فيما يلي بعض النصائح لمستخدمينا الذين يريدون الإبلاغ عن مشكلة:
إذا كانت لديك أسئلة أو كنت بحاجة إلى مساعدة في دمج المنتج، فيرجى الاتصال بنا بدلاً من فتح مشكلة.
