react dashboard pro

Панель управления React 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 }
    />
  ) ;
} ; 

Реквизит

свойство	описание	тип	значение по умолчанию	необходимый
виджеты	Дополнительный сбор объектов апплета	{ [ключ: строка]:виджет}		истинный
режим редактирования	Редактировать ли статус	логическое значение	ЛОЖЬ	ЛОЖЬ
defaultLayout	макет по умолчанию	макетItem[]	[]	ЛОЖЬ
виджетWrapClassName	имя класса контейнера виджета	нить		ЛОЖЬ
виджетWrapStyle	стиль контейнера виджета	React.CSSProperties		ЛОЖЬ
макет	данные макета	макетItem[]	нулевой	ЛОЖЬ
минВысота	минимальная высота	число	300	ЛОЖЬ
Максвиджетдлина	Максимальное количество виджетов, которые можно добавить на текущую панель мониторинга.	число	20	ЛОЖЬ
панель инструментов	Отображать ли панель инструментов по умолчанию	{тип: «слева» | «справа» | «сверху» | «снизу»;	истинный	ЛОЖЬ
Ключ хранения	Локально хранящийся уникальный идентификатор	логическое значение	'по умолчанию'	ЛОЖЬ
onLayoutChange	Обратный вызов изменения макета	(макет: LayoutsIF) => void		ЛОЖЬ
onReset	Очистить кнопку обратного вызова	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		ЛОЖЬ
onRemoveWidget	Удалить обратный вызов апплета	(виджет: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		ЛОЖЬ
onAddWidget	Добавьте обратный звонок в мини-программу	(виджет: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		ЛОЖЬ
onReload	Обратный вызов кнопки Обновить	(currentLayout: LayoutsIF) => void		ЛОЖЬ
onCancelEdit	Отменить изменение обратного вызова	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		ЛОЖЬ
onEdit	Введите обратный вызов редактирования	(currentLayout: LayoutsIF) => void		ЛОЖЬ
onSave	Обратный вызов кнопки «Сохранить»	(currentLayout: LayoutsIF) => void		ЛОЖЬ
onRevert	Восстановить обратный вызов кнопки	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		ЛОЖЬ

Виджет

Виджет может представлять собой любой открытый контент и может быть свободно расширен. Файл ввода должен экспортировать объект для описания виджета. Формат объекта следующий. Дополнительные виджеты можно увидеть здесь.

Виджеты по умолчанию в основном полагаются на antd и less. Обратите внимание на установку зависимостей.

свойство	описание	тип	значение по умолчанию	необходимый
имя	Название мини-программы	нить		истинный
описание	Мини описание программы	нить		истинный
теги	Теги, используемые в качестве основы классификации для мини-селекторов программ.	нить[]		истинный
компонент	Мини-программный компонент	Компонент |		истинный
configComponent	Компоненты конфигурации, соответствующие мини-программе	Компонент | ФункциональныйКомпонент |		истинный
максимальная длина	Максимальное количество раз, когда этот апплет можно добавить на текущую панель мониторинга.	число		истинный
снимок	Изображение мини-снимка программы, используемое для отображения мини-селектора программ.	ИзображениеBitmapИсточник		истинный
икона	Значок мини-программы, используемый для отображения переключателя мини-программ.	РеагироватьЭлемент		истинный
значокФон	Фон значка мини-программы, используемый для отображения выбора мини-программы	нить		истинный
размер	Информация о размере мини-программы	{defaultWidth: число;defaultHeight: число;maxWidth: число;maxHeight: число;minWidth: число;minHeight: число}		истинный

 // 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, чтобы скопировать данные макета в буфер обмена, и панель консоли также распечатает данные макета.

свойство	описание	тип	значение по умолчанию	необходимый
я	Уникальный идентификатор, начинающийся с уникального идентификатора мини-программы, за которым следует подчеркивание, например «widgetKey-1234567».	нить		истинный
ш	Количество копий по ширине, всего 12 копий	число		истинный
час	Количество копий по высоте, 1 копия около 30 пикселей.	число		истинный
х	Горизонтальное положение, всего 12 копий.	число		истинный
й	Портретное положение, размер 1 копии около 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
добавитьвиджет	Добавить апплет	(виджет)=>недействительно
удалить виджет	Удалить апплет	(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 >
    </ >
  ) ;
} ; 

Тодо

✅ Конфигурационная панель

☑️ разрыв

☑️ современная тема

☑️ темная тема

☑️ больше виджетов

✅ виджет-кли

☑️Интернационализация

Конец

• Каждый может поднимать вопросы. Я сделаю все возможное, чтобы удовлетворить ваши болевые точки, если у вас есть какие-либо потребности.
• Я продолжу поддерживать этот проект, чтобы каждый мог с уверенностью использовать его.

Если вы найдете это полезным, пожалуйста, поставьте ему звезду.