windmill dashboard react تنزيل - windmill dashboard react تنزيل كود المصدر

windmill dashboard react

فئات أخرى

Release 0.4.0

تنزيل

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

شاهده على الهواء مباشرة

هذا ليس القالب. هذا تطبيق كامل، مبني على React، مع الاهتمام بجميع التفاصيل الصغيرة، لذلك تحتاج فقط إلى إحضار البيانات لتغذيته.

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

؟ سمات

؟ يمكن الوصول إليها بسهولة (تم تطويرها باستخدام قارئات الشاشة)
؟ تم تمكين المظهر الداكن (تحميل صور مختلفة بناءً على المظهر)
؟ مكونات متعددة (مخصصة).
⚡ تقسيم الكود
الريح الخلفية CSS
واجهة المستخدم لرد فعل طاحونة الهواء
رد فعل جهاز التوجيه
الأبطال
Chart.js
تقدم PWA تجربة غير متصلة بالإنترنت وتشبه التطبيق

المستندات

المكونات العامة

تم بناء Windmill Dashboard React على واجهة Windmill React UI. ستجد الوثائق الخاصة بكل مكون صغير هناك.

التوجيه

يتم فصل المسارات في Windmill Dashboard إلى فئتين، الشريط الجانبي (routes/sidebar.js) والشريط العام (routes/index.js).

مسارات الشريط الجانبي

هذه هي المسارات التي ستظهر في الشريط الجانبي. ويتوقعون ثلاث خصائص:

path : الوجهة؛
name : الاسم الذي سيتم إظهاره؛
icon : أيقونة لتوضيح العنصر

العناصر التي يتم استخدامها كقوائم منسدلة، مثل خيار الصفحات، لا تحتاج إلى path ، ولكنها تتوقع مجموعة routes من الكائنات ذات path name :

 // sidebar.js
{
  path : '/app/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/create-account' ,
      name : 'Create account' ,
    } ,

الطرق العامة (جهاز التوجيه).

هذه طرق داخلية (خاصة). سيتم عرضها داخل التطبيق، باستخدام containers/Layout الافتراضي.

إذا كنت تريد إضافة مسار إلى صفحة مقصودة، على سبيل المثال، فيجب عليك إضافته إلى جهاز توجيه App (يتم توجيه src/App.js، تمامًا مثل Login و CreateAccount والصفحات الأخرى.

كيفية إضافة صفحة جديدة إلى جهاز التوجيه؟

قم بإنشاء صفحتك داخل src/pages ، على سبيل المثال MyPage.js ؛
أضفه إلى جهاز التوجيه العالمي ( src/routes/index.js )

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

ثم قم بإضافته إلى مجموعة routes :

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

إذا كنت تريد إتاحة الوصول إلى هذه الصفحة من الشريط الجانبي، فيجب عليك الخيارات التالية:

إضافته إلى مجموعة routes الجذر

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

إضافته كخيار ضمن القائمة المنسدلة

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

إذا كنت تسأل من أين يأتي هذا /app ، فمن هذا السطر داخل src/App.js ، الذي يعرض التطبيق:

 < Route path = "/app" component = { Layout } />

تم تمهيد هذا المشروع باستخدام تطبيق Create React.

البرامج النصية المتاحة

في دليل المشروع، يمكنك تشغيل:

`npm start`

تشغيل التطبيق في وضع التطوير.
افتح http://localhost:3000 لمشاهدته في المتصفح.

سيتم إعادة تحميل الصفحة إذا قمت بإجراء تعديلات.
سترى أيضًا أي أخطاء في الوبر في وحدة التحكم.

`npm test`

يقوم بتشغيل عداء الاختبار في وضع المراقبة التفاعلية.
راجع القسم الخاص بإجراء الاختبارات لمزيد من المعلومات.

`npm run build`

ينشئ التطبيق للإنتاج في مجلد build .
فهو يجمع React بشكل صحيح في وضع الإنتاج ويحسن البناء للحصول على أفضل أداء.

يتم تصغير البنية وتتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!

راجع القسم الخاص بالنشر لمزيد من المعلومات.

`npm run eject`

ملاحظة: هذه عملية في اتجاه واحد. بمجرد eject ، لا يمكنك العودة!

إذا لم تكن راضيًا عن أداة الإنشاء وخيارات التكوين، فيمكنك eject في أي وقت. سيؤدي هذا الأمر إلى إزالة تبعية البناء الفردي من مشروعك.

بدلاً من ذلك، سيقوم بنسخ جميع ملفات التكوين والتبعيات المتعدية (webpack، Babel، ESLint، إلخ) مباشرة إلى مشروعك بحيث يكون لديك السيطرة الكاملة عليها. ستظل كافة الأوامر باستثناء eject تعمل، لكنها ستشير إلى النصوص البرمجية المنسوخة حتى تتمكن من تعديلها. في هذه المرحلة أنت وحدك.

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