airframe next

هيكل الطائرة المقبل

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

• عرض العرض التوضيحي
• نسخة jQuery
• رد الفعل
• الإصدار الزاوي - الوثائق في التحضير
• إصدار VUE - الوثائق في التحضير
• إصدار MVC.NET - الوثائق في التحضير
• ملفات رسم (قريبا)

مقدمة

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

يعتمد مشروع هيكل الطائرة على NextJs NextJS - وهو إطار شهير تم إجراؤه للرد مع دعم تقديم جانب الخادم الرائع. يتضمن ReactStrap مخصص لدعم bootstrap. من المحتمل أن يتم وصف أي موضوع لن تجده هنا في وثائق NextJS.

ملاحظة: إذا كنت ترغب في استخدام هذا المشروع في الإنتاج ، فستحتاج إلى خادم يدعم Nodejs.

التكوين الأولي:

تحتاج إلى تثبيت NodeJS (> = 10.0.0) على جهازك المحلي ، قبل محاولة تشغيل بيئة DEV.

1. استخراج محتويات الحزمة إلى جهازك المحلي.
2. باستخدام المحطة انتقل إلى المحتويات المستخرجة.
3. تشغيل npm install .

تأكد من أن لديك ملف يسمى .npmrc في الدليل المستخرج. عادة ما يتم إخفاء هذه الملفات في الأنظمة القائمة على UNIX.

تطوير

لبدء نوع بيئة التطوير npm run dev في وحدة التحكم. سيبدأ هذا خادم تطوير بتمكين إعادة تحميل ساخن.

إنتاج

يمكنك استخدام برنامج نصي Shell متضمن مع الحزمة. إذا كنت تستخدم تشغيل /dist قائم على UNIX ./build-dist.sh

إذا لم تتمكن من استخدام البرنامج النصي Shell ، فأنت بحاجة إلى إعداد الحزمة يدويًا:

1. تشغيل npm run build
2. انسخ تلك المحتويات إلى الجهاز المستهدف
   • .next
   • static
   • package.json
   • .npmrc
3. قم بتشغيل npm install على الخادم حيث قمت بنسخ المحتويات أعلاه.
4. يمكنك الآن بدء تشغيل التطبيق عن طريق تشغيل npm start

بناء تخصيص

يمكنك إضافة ميزات بناء إضافية عن طريق إضافة الإضافات التالية وتكوينها داخل ملف next.config.js .

تفاصيل المشروع

بعض نقاط الاهتمام حول هيكل المشروع:

• components - يجب أن تذهب مكونات رد الفعل العالمية هنا
• styles - لن يتم التعامل مع الأنماط المضافة هنا كوحدات CSS ، لذلك يجب أن تذهب أي فصول عالمية أو أنماط مكتبة هنا
• features - يجب العثور على مكونات محددة للصفحة هنا
• features/Layout - يمكن العثور على مكون AppLayout هنا والذي يستضيف محتويات الصفحة داخل نفسه. يمكنك تغيير مكون التخطيط لكل صفحة.
• core/colors.js - تصدر كائن مع جميع الألوان المحددة بواسطة لوحة القيادة. مفيد لتصميم المكونات القائمة على JS - على سبيل المثال المخططات.
• pages - يجب أن تكون مكونات الصفحة هنا. سيقوم NextJs تلقائيًا بتخطيط أسماء الملفات لتوجيه عناوين URL.

التوجيه

يجب وضع مكونات الطريق في أدلة منفصلة داخل /routes/ الدليل. بعد ذلك ، يجب عليك فتح /ملف /routes/index.js وإرفاق المكون. يمكنك القيام بذلك بطريقتين مختلفتين:

واردات ثابتة

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

 // Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
    return (
        < Switch >
            { /* ... */ }
            { /* Define the route for a specific path */ }
            < Route path = "/some-page" exact component = { SomePage } />
            { /* ... */ }
        </ Switch >
    ) ;
} 

التوجيه

يتم التعامل مع نظام التوجيه بواسطة NextJS نفسه. يمكنك العثور على الوثائق هنا - توجيه NextJS

توجيه تخطيط محدد

في بعض الأحيان قد ترغب في عرض محتوى إضافي في Navbar أو الشريط الجانبي. للقيام بذلك ، يجب عليك تحديد مكون تخطيط مخصص لصفحة معينة. مثال:

1. قم بإنشاء مكون تخطيط جديد في features/layout . خذ مكون LayoutDefault كمثال.
2. افتح مكون الصفحة لمسار معين. على سبيل المثال pages/example-page.js
3. اضبط مكون التصميم المخصص مثل هذا:

 import React from 'react' ;

import { CustomLayout } from
    './../../features/Layout/CustomLayout' ;

const ExamplePage = ( ) => (
    { /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;

export default ExamplePage ; 

هم

يمكنك تعيين نظام الألوان للشريط الجانبي والرسام البحري من خلال توفير initialStyle و initialColor على مكون <ThemeProvider> الذي يجب أن يلف المكون <Layout> .

قيم initialStyle محتملة:

• ضوء
• مظلم
• لون

القيم initialColor المحتملة:

• أساسي
• نجاح
• معلومات
• تحذير
• خطر
• النيلي
• أرجواني
• لون القرنفل
• أصفر

تغيير الموضوع البرمجي

يمكنك تغيير نظام الألوان في وقت التشغيل باستخدام ThemeConsumer من المكونات. مثال:

 // ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
    < ThemeConsumer >
        ( { onChangeTheme } ) = > (
            < React . Fragment >
                < Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
                    Switch to Light
                </ Button >
                < Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
                    Switch to Dark
                </ Button >
            </ React . Fragment >
        )
    </ ThemeConsumer >
) ;

الخيارات التي يوفرها ThemeConsumer :

• نمط - نمط السمة الحالي
• اللون - لون السمة الحالي
• Onchangetheme ({style؟ ، color؟}) - يسمح بتغيير السمة