react dashboard pro

리액트 대시보드 프로

즉시 사용 가능한 원스톱 대시보드 솔루션

몇 가지 간단한 단계만으로 동적 대시보드 기능을 사용할 수 있습니다.

수천의 사람, 수천의 얼굴'의 B면에서 거의 사용되는 대시보드 + 위젯의 사용자 정의 요구를 해결합니다.

즉시 사용 가능한 원스톱 대시보드 솔루션

몇 가지 간단한 단계만으로 동적 대시보드 기능을 사용할 수 있습니다.

"수천명의 사람들"의 대시보드 + 위젯 사용자 정의 요구 사항을 해결합니다.

저장소

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

소품

재산	설명	유형	기본값	필수의
위젯	애플릿 객체의 선택적 컬렉션	{ [키: 문자열]:위젯}		진실
편집 모드	상태 편집 여부	불리언	거짓	거짓
기본 레이아웃	기본 레이아웃	레이아웃항목[]	[]	거짓
widgetWrapClassName	위젯 컨테이너 클래스 이름	끈		거짓
위젯랩스타일	위젯 컨테이너 스타일	React.CSS속성		거짓
공들여 나열한 것	레이아웃 데이터	레이아웃항목[]	null	거짓
최소 높이	최소 높이	숫자	300	거짓
최대 위젯 길이	현재 대시보드에 추가할 수 있는 최대 위젯 수	숫자	20	거짓
도구 모음	기본 도구 모음 표시 여부	{유형: '왼쪽' | '상단' | '하단';	진실	거짓
저장 키	로컬에 저장된 고유 식별자	불리언	'기본'	거짓
onLayoutChange	레이아웃 변경 콜백	(레이아웃: LayoutsIF) => 무효		거짓
재설정 시	지우기 버튼 콜백	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		거짓
onRemoveWidget	애플릿의 콜백 삭제	(위젯: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		거짓
onAddWidget	미니 프로그램에 콜백 추가	(위젯: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		거짓
다시 로드할 때	새로고침 버튼 콜백	(currentLayout: LayoutsIF) => 무효		거짓
onCancel편집	콜백 수정 취소	(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => void		거짓
onEdit	편집 콜백을 입력하세요.	(currentLayout: LayoutsIF) => 무효		거짓
저장 시	저장 버튼 콜백	(currentLayout: LayoutsIF) => 무효		거짓
되돌리기	복원 버튼 콜백	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		거짓

위젯

위젯은 열려 있는 모든 콘텐츠일 수 있으며 위젯을 설명하기 위해 항목 파일을 내보내야 합니다. 더 많은 위젯은 여기에서 볼 수 있습니다.

기본 위젯은 기본적으로 antd 및 less에 의존합니다. 종속성 설치에 주의하세요.

재산	설명	유형	기본값	필수의
이름	미니 프로그램 이름	끈		진실
설명	미니 프로그램 설명	끈		진실
태그	미니 프로그램 선택기의 분류 기준으로 사용되는 태그	끈[]		진실
요소	미니 프로그램 구성 요소	구성요소 | 기능구성요소		진실
구성 구성 요소	미니 프로그램에 대응하는 구성요소	구성 요소 |		진실
최대 길이	이 애플릿을 현재 대시보드에 추가할 수 있는 최대 횟수	숫자		진실
스냅 사진	미니 프로그램 선택기 디스플레이에 사용되는 미니 프로그램 스냅샷 이미지	이미지비트맵소스		진실
상	미니 프로그램 선택기 표시에 사용되는 미니 프로그램 아이콘	반응요소		진실
아이콘배경	미니 프로그램 선택기 표시에 사용되는 미니 프로그램 아이콘 배경	끈		진실
크기	미니 프로그램 크기 정보	{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 사본은 약 30px입니다.	숫자		진실
엑스	가로 위치, 총 12개	숫자		진실
와이	세로 위치, 1개 사본은 약 30px입니다.	숫자		진실
최소W	최소 너비	숫자		진실
최대 W	최대 너비	숫자		진실
시간	최소 높이	숫자		진실
최대H	최대 높이	숫자		진실

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

방법

컴포넌트 인스턴스는 ref를 통해 얻을 수 있습니다. 일부 메소드 및 dom 객체는 인스턴스 객체에 마운트되어 사용자 정의 도구 모음 및 WidgetSelector를 쉽게 확장할 수 있습니다.

재산	설명	유형
돔	DOM 객체	HTMLDiv요소
위젯 추가	애플릿 추가	(위젯)=>무효
제거위젯	애플릿 삭제	(i:widgetKey)=>무효
다시 장전하다	새로 고치다	()=>무효
편집하다	편집으로 이동	()=>무효
취소편집	편집 취소	()=>무효
돌아가는 것	다시 놓기	()=>무효
구하다	구하다	()=>무효

 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

✔️국제화

끝

• 누구든지 문제를 제기하는 것을 환영합니다. 필요한 사항이 있으면 최선을 다해 문제점을 해결해 드리겠습니다.
• 모두가 안심하고 사용할 수 있도록 이 프로젝트를 계속해서 유지하겠습니다.

유용하다고 생각하시면 별표 부탁드립니다.