react dashboard pro

رد فعل لوحة القيادة برو

حل لوحة القيادة الشامل والجاهز للتشغيل

وظيفة لوحة المعلومات الديناميكية في بضع خطوات بسيطة فقط

إنه يحل احتياجات التخصيص لـ Dashboard + Widget، والتي يتم استخدامها تقريبًا بواسطة الجانب B من "آلاف الأشخاص، آلاف الوجوه".

حل متكامل للوحة المعلومات يعمل فور إخراجه من الصندوق

احصل على وظيفة لوحة القيادة الديناميكية في بضع خطوات بسيطة فقط

إنه يحل احتياجات تخصيص Dashboard + Widget لـ "آلاف الأشخاص".

مستودع

https://github.com/yuanguandong/react-dashboard-pro

المستندات

https://yuanguandong.github.io/react-dashboard-pro/

تجريبي

ثَبَّتَ

npm i react-dashboard-pro -S

تنزيل القطعة

npm i widgets-cli -D
npx widgets-cli

متجر القطعة

https://yuanguandong.github.io/react-widgets/

الاستخدام

 import React , { useState } from 'react' ;
import type { LayoutsIF } from 'react-dashboard-pro' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const [ layout , setLayout ] = useState < LayoutsIF > ( [ ] ) ;
  const onLayoutChange = ( layout : LayoutsIF ) => {
    setLayout ( layout ) ;
  } ;
  return (
    < Dashboard
      widgets = { allWidgets }
      onLayoutChange = { onLayoutChange }
      layout = { layout }
    />
  ) ;
} ; 

الدعائم

ملكية	وصف	يكتب	defaultValue	مطلوب
الحاجيات	مجموعة اختيارية من الكائنات الصغيرة	{ [مفتاح: سلسلة]: القطعة}		حقيقي
EditMode	سواء لتحرير الحالة	منطقية	خطأ شنيع	خطأ شنيع
defaultLayout	التخطيط الافتراضي	عنصر التخطيط[]	[]	خطأ شنيع
القطعةWrapClassName	اسم فئة حاوية القطعة	خيط		خطأ شنيع
widgetWrapStyle	نمط حاوية القطعة	React.CSSProperties		خطأ شنيع
تَخطِيط	بيانات التخطيط	عنصر التخطيط[]	باطل	خطأ شنيع
minHeight	الحد الأدنى للارتفاع	رقم	300	خطأ شنيع
maxWidgetLength	الحد الأقصى لعدد عناصر واجهة المستخدم التي يمكن إضافتها إلى لوحة المعلومات الحالية	رقم	20	خطأ شنيع
شريط الأدوات	ما إذا كان سيتم عرض شريط الأدوات الافتراضي أم لا	{النوع: "يسار" |. "يمين" |. "أعلى" |. "أسفل"؛	حقيقي	خطأ شنيع
com.storageKey	المعرف الفريد المخزن محليًا	منطقية	'تقصير'	خطأ شنيع
onLayoutChange	رد اتصال تغيير التخطيط	(التخطيط: LayoutsIF) => باطل		خطأ شنيع
onReset	مسح رد الاتصال بالزر	(dirtyCurrentLayout: LayoutsIF، currentLayout: LayoutItem) => باطل		خطأ شنيع
onRemoveWidget	حذف رد الاتصال من التطبيق الصغير	(القطعة: WidgetIF،dirtyCurrentLayout: LayoutsIF،currentLayout: LayoutsIF) => باطل		خطأ شنيع
onAddWidget	إضافة رد اتصال إلى البرنامج المصغر	(القطعة: WidgetIF،dirtyCurrentLayout: LayoutsIF،currentLayout: LayoutsIF) => باطل		خطأ شنيع
onReload	تحديث زر الاتصال	(currentLayout: LayoutsIF) => باطل		خطأ شنيع
onCancelEdit	إلغاء تحرير رد الاتصال	(dirtyCurrentLayout: LayoutsIF،currentLayout: LayoutItem) => باطل		خطأ شنيع
onEdit	أدخل رد الاتصال التحرير	(currentLayout: LayoutsIF) => باطل		خطأ شنيع
onSave	زر حفظ رد الاتصال	(currentLayout: LayoutsIF) => باطل		خطأ شنيع
onRevert	استعادة زر رد الاتصال	(dirtyCurrentLayout: LayoutsIF، currentLayout: LayoutItem) => باطل		خطأ شنيع

القطعة

يمكن أن تكون عنصر واجهة المستخدم أي محتوى مفتوح ويمكن توسيعها بحرية. يحتاج ملف الإدخال إلى تصدير كائن لوصف عنصر واجهة المستخدم. لمزيد من عناصر واجهة المستخدم، يمكنك رؤيتها هنا

تعتمد الأدوات الافتراضية بشكل أساسي على antd وأقل. انتبه إلى تثبيت التبعيات.

ملكية	وصف	يكتب	defaultValue	مطلوب
اسم	اسم البرنامج المصغر	خيط		حقيقي
وصف	شرح البرنامج المصغر	خيط		حقيقي
العلامات	العلامات المستخدمة كأساس لتصنيف محددات البرامج المصغرة	خيط[]		حقيقي
عنصر	مكون البرنامج المصغر	مكون |		حقيقي
configComponent	مكونات التكوين المقابلة للبرنامج المصغر	مكون |.مكون الوظيفة فارغ		حقيقي
أقصى طول	الحد الأقصى لعدد المرات التي يمكن فيها إضافة هذا التطبيق الصغير إلى لوحة المعلومات الحالية	رقم		حقيقي
snapShot	صورة لقطة صغيرة للبرنامج، تستخدم لعرض محدد البرنامج المصغر	ImageBitmapSource		حقيقي
رمز	أيقونة برنامج صغير، تستخدم لعرض محدد البرنامج الصغير	ReactElement		حقيقي
iconBackground	خلفية أيقونة برنامج صغير، تستخدم لعرض محدد البرنامج الصغير	خيط		حقيقي
مقاس	معلومات حجم البرنامج المصغر	{defaultWidth: number;defaultHeight: number;maxWidth: number;maxHeight: number;minWidth: number;minHeight: number}		حقيقي

 // todo/index.tsx
import { CalendarOutlined } from '@ant-design/icons' ;
import Panel from './component' ;
import snapShot from './snapshot.png' ;

export default {
  name : 'Todo' ,
  description : 'todo list' ,
  tags : [ 'all' , 'list' ] ,
  component : Panel ,
  configComponent : null ,
  maxLength : 2 ,
  snapShot ,
  icon : < CalendarOutlined /> ,
  iconBackground : 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)' ,
  size : {
    defaultWidth : 3 ,
    defaultHeight : 11 ,
    maxWidth : 12 ,
    maxHeight : 16 ,
    minWidth : 2 ,
    minHeight : 4 ,
  } ,
}
// **/**.index ……

// widgets/index.tsx
import clock from './clock' ;
import column from './column' ;
import guide from './guide' ;
import popular from './popular' ;
import ring from './ring' ;
import todo from './todo' ;

export default { clock , guide , popular , todo , column , ring } ;

تَخطِيط

بشكل عام، لا تحتاج معلومات التخطيط إلى الكثير من الاهتمام، بل تحتاج فقط إلى تسلسلها وتخزينها في شكل سلسلة إذا كنت تريد الحصول على بيانات تخطيط لوحة المعلومات في الوقت الفعلي (على سبيل المثال، عندما تريد تعيين التخطيط الافتراضي). )، يمكنك التركيز (النقر بالماوس) على ما يتوافق مع لوحة المعلومات، اضغط على مفتاح الاختصار Ctrl+Shift+C لنسخ بيانات التخطيط إلى الحافظة، وستقوم لوحة التحكم أيضًا بطباعة بيانات التخطيط.

ملكية	وصف	يكتب	defaultValue	مطلوب
أنا	المعرف الفريد، يبدأ بالمعرف الفريد للبرنامج الصغير متبوعًا بشرطة سفلية، مثل 'widgetKey-1234567'	خيط		حقيقي
ث	عدد النسخ العرضية، إجمالي 12 نسخة	رقم		حقيقي
ح	عدد نسخ الارتفاع، النسخة الواحدة حوالي 30 بكسل	رقم		حقيقي
س	الوضع الأفقي، إجمالي 12 نسخة	رقم		حقيقي
ذ	موضع عمودي، نسخة واحدة حوالي 30 بكسل	رقم		حقيقي
الحد الأدنى واط	الحد الأدنى للعرض	رقم		حقيقي
الحد الأقصى	أقصى عرض	رقم		حقيقي
ح	الحد الأدنى للارتفاع	رقم		حقيقي
الحد الأقصى	أقصى ارتفاع	رقم		حقيقي

 export default [
  {
    w : 3 ,
    h : 16 ,
    x : 0 ,
    y : 0 ,
    i : 'Popular-81735522335293475546087951289435' ,
  } ,
  {
    w : 3 ,
    h : 11 ,
    x : 3 ,
    y : 5 ,
    i : 'Todo-53084247679600442035440807237732' ,
  }
] 

طريقة

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

ملكية	وصف	يكتب
دوم	كائن DOM	HTMLDivElement
addWidget	إضافة التطبيق الصغير	(القطعة)=>باطلة
com.removeWidget	حذف التطبيق الصغير	(i:widgetKey)=>void
إعادة تحميل	ينعش	()=>باطلة
يحرر	انتقل إلى التحرير	()=>باطلة
إلغاء تحرير	إلغاء التعديل	()=>باطلة
يرجع	إعادة ضبط	()=>باطلة
يحفظ	يحفظ	()=>باطلة

 import React , { useRef } from 'react' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const ref = useRef ( )
  const addWidget = ( ) => {
    ref . current . addWidget ( 'Todo-1234567' )
  }
  return ( < >
      < Dashboard
        ref = { ref }
        widgets = { allWidgets }
      />
      < button onClick = { addWidget } >新增</ button >
    </ >
  ) ;
} ; 

ما يجب القيام به

✅ لوحة التكوين

☑️فجوة

☑️ موضوع حديث

☑️ موضوع مظلم

☑️ المزيد من الحاجيات

✅ القطعة CLI

☑️التدويل

النهاية

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

إذا وجدت أنه مفيد، يرجى إعطائه نجمة.