الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

الإعلانات

  • إضافة صفحة مدير الملفات واجهة المستخدم
  • إصدار Mantine المحدث إلى أحدث 7.14.3
  • متغير وضع الظلام الجديد
  • متغير الشريط الجانبي الجديد ، لدينا الآن أوضاع كاملة ومصغرة وكاملة


  • معاينة حية
  • معاينة المكونات
  • واسطة
  • خريطة طريق المنتج * جديدة *

عن

قالب المسؤول والوحة القيادة المحترفة التي تم بناؤها على مانتين 7 والتي تأتي مع مئات مكونات واجهة المستخدم ، والنماذج ، والجداول ، والمخططات ، والصفحات والرموز. تم تصميم هذا القالب باستخدام مخططات V14 التالية ، React ، Apex ، Mantine DataTable و Storybook.

معاينة الصورة

الإصدار السابق

يدعم الإصدار السابق من قالب لوحة القيادة ، 13 مع جهاز توجيه الصفحات و Mantine 6. لعرض العرض التجريبي المباشر ، استخدم هذا الرابط - معاينة ، وللتحلم الشوكة ، استخدم ريبو هذا الرابط - الإصدار 1

سمات

  • قابل للتخصيص: لا تحتاج إلى أن تكون خبيرًا لتخصيص القالب. رمزنا قابل للقراءة للغاية وموثقة جيدًا.
  • الاستجابة الكاملة: مع دعم الأجهزة المحمولة ، واللوصية وسطح المكتب ، لا يهم الجهاز الذي تستخدمه. تستجيب لوحة القيادة Antd في جميع المتصفحات.
  • المتصفح المتقاطع: مواضيعنا تعمل بشكل مثالي مع Chrome و Firefox و Opera و Edge. نحن نعمل بجد لدعمهم.
  • رمز نظيف: نتبع بصرامة إرشادات ANT Design لجعل تكاملك سهلًا قدر الإمكان. كل الكود مكتوبة بخط اليد.
  • التحديثات العادية: من وقت لآخر ، ستتلقى تحديثًا يحتوي على مكونات جديدة ، وتحسينات ، وإصلاحات الأخطاء.

مكدس التكنولوجيا

لجعل هذا القالب رائع ، استخدمت الحزم التالية:

جوهر

  • Next JS V14: Next.js هو إطار تطوير ويب مفتوح المصدر الذي أنشأته شركة Vercel الخاصة التي توفر تطبيقات الويب المستندة إلى رد الفعل مع عرض من جانب الخادم وتوليد موقع ثابت.
  • Mantine V7: Mantine هي مكتبة مكونات واجهة المستخدم. إنه مبني على رأس React و TypeScript ، ويوفر مجموعة متنوعة من المكونات والخطافات لبناء تطبيقات ويب عالية الأداء.
  • React V18: React هي مكتبة JavaScript في الواجهة الأمامية مجانية ومفتوحة المصدر لبناء واجهات المستخدم بناءً على المكونات.
  • TypeScript V5: TypeScript هي لغة برمجة مجانية ومفتوحة المصدر عالي المستوى تم تطويرها بواسطة Microsoft تضيف الكتابة الثابتة مع تعليقات من النوع الاختياري إلى JavaScript.
  • Storybook V7: Storybook هي أداة مجانية ومفتوحة المصدر لتطوير مكونات واجهة المستخدم بمعزل عن غيرها. يستخدمه مطورو الويب لتحسين سير عمل تطوير واجهة المستخدم وإنشاء تطبيقات ويب أفضل.
  • تغييرات CLI V2: تغييرات هي حزمة تساعد في إدارة الإصدارات الخاصة بي و changelogs.
  • Nextauth v4: NextAuth.js هي مكتبة مصادقة مرنة وآمنة يمكن استخدامها للمصادقة من جانب العميل في Next.js.
  • أيقونات Tabler V2: Icons Tableer هي مكتبة أيقونة مجانية ومفتوحة المصدر مع أكثر من 4700 أيقون. تم تصميم الرموز مع جمالية حديثة وهي مناسبة لمجموعة واسعة من التطبيقات.
  • mantine datatable v7: mantine datatable هو مكون رد فعل يمكن استخدامه لإنشاء واجهات مستخدم غنية بالبيانات. إنه مكون الجدول الذي يدرك السمات المظلمة ومصممة لواجهة مستخدم Mantine.
  • LODASH V4: مكتبة أدوات JavaScript التي تقدم الاتساق والنموذج والأداء والإضافات.
  • Apex Chart V3: S ApexCharts هي مكتبة JavaScript مجانية ومفتوحة المصدر تتيح للمطورين إنشاء تصورات تفاعلية للبيانات لصفحات الويب. يمكن استخدامه للمشاريع التجارية وغير التجارية.
  • Dayjs V1: Day.js هي مكتبة JavaScript التي تتعامل مع التواريخ والأوقات.
  • Tiptap V2: محرر نصية غني غير مقطوع الرأس ، إطار عمل ، استنادًا إلى Prosemirror.
  • FullCalendar V6 : FullCalendar هو تقويم حدث JavaScript مع أكثر من 300 إعداد. إنه مفتوح المصدر وله قلب حر.
  • DND-KIT V6: DND-KIT عبارة عن مجموعة أدوات لسحب وإفلات خفيفة الوزن ، وحداسية ، وقابلة للتمديد للرد. كما أنه يمكن الوصول إليه وأداء.
  • Embla Carousel V7: Embla Carousel هي مكتبة كاروسيل خفيفة الوزن مع حركة السوائل والضرب الدقيق.
  • تفاعل خرائط Simple V3: مكون مخطط MAP SVG مبني مع React.
  • Clerk/NextJS V4: Clerk Next.js هو غلاف حول كاتب رد فعل. يسمح للمستخدمين باستخدام السنانير التي يوفرها Clerk React.
  • React Countup V6: غلاف مكون React حول countup.js.

ديف

  • أجمل V3: أجمل هو رمز تنسيق يتناسب تلقائيًا لضمان أن يكون متسقًا وسهل القراءة.
  • Husky V8: Husky هي أداة تجعل من السهل العمل مع السنانير git. أجمل هو تنسيق رمز.
  • LINT SADAGED V15: سوف تضيف LINT LINT تلقائيًا أي تعديلات على الالتزام طالما لا توجد أخطاء.
  • PostCSS V8: PostCSS هي مكتبة JavaScript التي تستخدم الإضافات لتحويل CSS. ينقل CSS إلى شجرة بناء جملة مجردة ، والتي يتم تمثيلها بعد ذلك بواسطة كائنات JavaScript.

بداية سريعة

تحميل

  • استنساخ هذا repo git clone https://github.com/design-sparx/mantine-analytics-dashboard.git
  • تحميل من جيثب

بناء الأدوات

ستحتاج إلى تثبيت Node.js. بمجرد تثبيت Node.js ، قم بتثبيت NPM لتثبيت بقية تبعيات القالب. سيتم تنزيل جميع التبعيات على دليل node_modules. 

npm install

أنت الآن مستعد لتعديل الملفات المصدر وإنشاء ملفات جديدة. لاكتشاف تغييرات الملف تلقائيًا وبدء خادم ويب محلي على http: // localhost: 3000 ، قم بتشغيل الأمر التالي. 

npm run dev

تجميع جميع الملفات المصدر ، وتحسينها ، و minify و uglify لإنشاء/ 

npm run build

بنية الملف

داخل ملف Zip-show ستجد الدلائل والملفات التالية. كل من ملفات التوزيع التي تم تجميعها ومُصغِّلة ، كما هو الحال داخل ملف zip ، ستجد الدلائل والملفات التالية. يتم تضمين كل من ملفات التوزيع المجمعة والمُعين ، وكذلك الملفات المصدر في الحزمة. 

 mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│   ├── mocks/
│   ├── _redirects
│   ├── favicon.ico
├── src/
│   ├── .changeset/
│   ├── .github/
│   ├── .husty/
│   ├── .storybook/
│   ├── .yarn/
│   ├── app/
├────── api/
├────── error.tsx
├────── error.module.css
├────── global.css
├────── layout.tsx
├────── loading.tsx
├────── not-found.tsx
├────── page.module.css
├────── page.tsx
│   ├── components/
│   ├── hooks/
│   ├── layout/
│   ├── providers/
│   ├── public/
│   ├── routes/
│   ├── styles/
│   ├── theme/
│   ├── types/
│   ├── utils/
└──

المساهمة والدعم

أرحب بجميع المطورين والعشاق للمساهمة في نمو قالب لوحة معلومات المشرف مفتوح المصدر. المساهمة هي عملية تعاونية تمكننا من تعزيز قدرات القالب وجودةها بشكل جماعي. للبدء:

  • شوكة المستودع: شوكة مستودع github في القالب إلى حساب github الخاص بك.
  • استنساخ الشوكة: استنساخ المستودع المتشعب إلى جهازك المحلي باستخدام GIT.
  • إنشاء فرع: إنشاء فرع جديد لمساهماتك للحفاظ على قاعدة الشفرة الرئيسية سليمة.
  • تنفيذ التغييرات: قم بإجراء التغييرات المطلوبة ، أو إضافة مكونات جديدة ، أو صقل الميزات الحالية.
  • ارتكب ودفع: ارتكب تغييراتك على الفرع الجديد ودفعها إلى شوكة GitHub.
  • إرسال طلب سحب: أرسل طلب سحب من مستودعك المتشعب إلى مستودع القالب الرئيسي. ستتم مراجعة التغييرات الخاصة بك وربما تم دمجها.

الإبلاغ عن القضايا والسعي للحصول على المساعدة

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

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

دعوة للاستكشاف والاستفادة

قالب لوحة معلومات Mantine و Next.js. إنها بداية - نقطة انطلاق لرحلتك الإبداعية. سواء كنت مطورًا متمرسًا يبحث عن إطلاق سريع أو متحمس حريص على تعلم ممارسات التطوير الحديثة ، فإن هذا القالب هو قماشك.

موارد أخرى

  • NextJS - https://nextjs.org/docs
  • React - https://react.dev/learn
  • Mantine - https://mantine.dev/getting-started/
  • Nextauth - https://authjs.dev/
  • Storybook - https://storybook.js.org/docs/get-started/install
  • Apexcharts - https://apexcharts.com/docs/installation/
  • Tiptap - https://tiptap.dev/introduction
  • dndkit - https://docs.dndkit.com/
  • embla carousel-https://www.embla-carousel.com/get-started/
  • FullCalendar - https://fullcalendar.io/docs/getting-started
  • تفاعل الخرائط البسيطة-https://www.react-simple-maps.io/docs/getting-started/
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل