react dashboard pro

Painel React Pro

Solução de painel única e pronta para uso

Funcionalidade do Painel Dinâmico em apenas algumas etapas simples

Resolve as necessidades de customização do Dashboard + Widget, que quase são utilizadas pelo lado B de “Milhares de Pessoas, Milhares de Rostos”.

Uma solução de painel completa que funciona imediatamente

Tenha funcionalidade de painel dinâmico em apenas algumas etapas simples

Resolve as necessidades de personalização do Dashboard + Widget de “milhares de pessoas”.

Repositório

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

Documentos

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

Demonstração

Instalar

npm i react-dashboard-pro -S

Widget de download

npm i widgets-cli -D
npx widgets-cli

Loja de widgets

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

Uso

 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 }
    />
  ) ;
} ; 

Adereços

propriedade	descrição	tipo	valor padrão	obrigatório
widgets	Coleção opcional de objetos de miniaplicativo	{ [chave: string]: widget}		verdadeiro
modo de edição	Se deseja editar o status	booleano	falso	falso
layout padrão	layout padrão	layoutItem[]	[]	falso
widgetWrapClassName	nome da classe do contêiner do widget	corda		falso
widgetWrapStyle	estilo de contêiner de widget	React.CSSPropriedades		falso
disposição	dados de layout	layoutItem[]	nulo	falso
altura mínima	altura mínima	número	300	falso
maxWidgetLength	O número máximo de widgets que podem ser adicionados ao painel atual	número	20	falso
barra de ferramentas	Se deve exibir a barra de ferramentas padrão	{tipo: 'esquerda' | 'direita' | 'superior' | 'inferior';	verdadeiro	falso
chave de armazenamento	Identificador exclusivo armazenado localmente	booleano	'padrão'	falso
onLayoutChange	Retorno de chamada de alteração de layout	(layout: LayoutsIF) => vazio		falso
onReset	Limpar retorno de chamada do botão	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		falso
onRemoveWidget	Exclua o retorno de chamada do miniaplicativo	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		falso
onAddWidget	Adicione um retorno de chamada ao miniprograma	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		falso
onReload	Retorno de chamada do botão Atualizar	(currentLayout: LayoutsIF) => vazio		falso
onCancel	Cancelar edição de retorno de chamada	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		falso
ligado	Insira o retorno de chamada de edição	(currentLayout: LayoutsIF) => vazio		falso
ao salvar	Salvar retorno de chamada do botão	(currentLayout: LayoutsIF) => vazio		falso
onRevert	Retorno de chamada do botão Restaurar	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		falso

Widget

Um widget pode ter qualquer conteúdo aberto e pode ser expandido livremente. O arquivo de entrada precisa exportar um objeto para descrever o widget. Para mais widgets, você pode ver aqui.

Os widgets padrão dependem basicamente de antd e less. Preste atenção na instalação de dependências.

propriedade	descrição	tipo	valor padrão	obrigatório
nome	Nome do miniprograma	corda		verdadeiro
descrição	Descrição do miniprograma	corda		verdadeiro
etiquetas	Tags, usadas como base de classificação para minisseletores de programas	corda[]		verdadeiro
componente	Componente de miniprograma	Componente|FunçãoComponente		verdadeiro
configComponent	Componentes de configuração correspondentes ao miniprograma	Componente |FunçãoComponent |		verdadeiro
comprimento máximo	O número máximo de vezes que este miniaplicativo pode ser adicionado ao painel atual	número		verdadeiro
instantâneo	Imagem instantânea do miniprograma, usada para exibição do seletor de miniprograma	Fonte de imagemBitmap		verdadeiro
ícone	Ícone do miniprograma, usado para exibição do seletor de miniprograma	Elemento React		verdadeiro
ícone Fundo	Fundo do ícone do mini programa, usado para exibição do mini seletor de programa	corda		verdadeiro
tamanho	Informações sobre o tamanho do miniprograma	{defaultWidth: número;defaultHeight: número;maxWidth: número;maxHeight: número;minWidth: número;minHeight: número}		verdadeiro

 // 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 } ;

Disposição

Geralmente, as informações de layout não precisam receber muita atenção. Elas só precisam ser serializadas e armazenadas em formato de string. Se você deseja obter os dados de layout do painel em tempo real (por exemplo, ao definir o layout padrão). pode focar (clique do mouse) no correspondente No painel, pressione a tecla de atalho Ctrl+Shift+C para copiar os dados do layout para a área de transferência, e o painel do console também imprimirá os dados do layout.

propriedade	descrição	tipo	valor padrão	obrigatório
eu	Identificador exclusivo, começando com o identificador exclusivo do miniprograma seguido por um sublinhado, como 'widgetKey-1234567'	corda		verdadeiro
c	Número de cópias em largura, 12 cópias no total	número		verdadeiro
h	Número de cópias de altura, 1 cópia tem cerca de 30px	número		verdadeiro
x	Posição horizontal, 12 cópias no total	número		verdadeiro
sim	Posição retrato, 1 cópia tem cerca de 30px	número		verdadeiro
minW	largura mínima	número		verdadeiro
W máx.	largura máxima	número		verdadeiro
h	altura mínima	número		verdadeiro
máxH	altura máxima	número		verdadeiro

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

Método

A instância do componente pode ser obtida por meio de ref. Alguns métodos e objetos dom são montados no objeto de instância, que pode facilmente expandir a barra de ferramentas e o WidgetSelector personalizados.

propriedade	descrição	tipo
dom	Objeto DOM	Elemento HTMLDiv
adicionarWidget	Adicionar miniaplicativo	(widget) => vazio
removerWidget	Excluir miniaplicativo	(i:widgetKey)=>void
recarregar	atualizar	()=>nulo
editar	Insira a edição	()=>nulo
cancelar	Cancelar edição	()=>nulo
reverter	reiniciar	()=>nulo
salvar	salvar	()=>nulo

 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 >
    </ >
  ) ;
} ; 

Pendência

✅ configPanel

☑️ lacuna

☑️ tema moderno

☑️ tema escuro

☑️ mais widgets

✅ widget-cli

☑️Internacionalização

O fim

• Todos são bem-vindos para levantar questões. Farei o meu melhor para atender aos seus pontos fracos se você tiver alguma necessidade.
• Continuarei mantendo este projeto, todos podem utilizá-lo com confiança

Se você achar útil, dê uma estrela.