react dashboard pro

Bereaksi Dasbor Pro

Solusi dasbor terpadu yang unik

Fungsi Dasbor Dinamis hanya dalam beberapa langkah sederhana

Ini memecahkan kebutuhan penyesuaian Dasbor + Widget, yang hampir digunakan oleh sisi-B "Ribuan Orang, Ribuan Wajah".

Solusi dasbor terpadu yang langsung berfungsi

Miliki fungsionalitas dasbor dinamis hanya dalam beberapa langkah sederhana

Ini memecahkan kebutuhan penyesuaian Dasbor + Widget "ribuan orang".

Gudang

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

dokumen

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

Demo

Memasang

npm i react-dashboard-pro -S

Unduh Widget

npm i widgets-cli -D
npx widgets-cli

Toko Widget

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

Penggunaan

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

Alat peraga

milik	keterangan	jenis	Nilai default	diperlukan
widget	Koleksi objek applet opsional	{ [kunci: string]:widget}		BENAR
editMode	Apakah akan mengedit status	boolean	PALSU	PALSU
tata letak default	tata letak bawaan	tata letakItem[]	[]	PALSU
widgetWrapClassName	nama kelas wadah widget	rangkaian		PALSU
widgetWrapStyle	gaya wadah widget	React.CSSProperties		PALSU
tata letak	data tata letak	tata letakItem[]	batal	PALSU
minTinggi	tinggi minimal	nomor	300	PALSU
maxWidgetLength	Jumlah maksimum widget yang dapat ditambahkan ke dasbor saat ini	nomor	20	PALSU
bilah alat	Apakah akan menampilkan toolbar default	{ketik: 'kiri' |. 'kanan' |. 'atas' |. 'bawah';	BENAR	PALSU
kunci penyimpanan	Pengidentifikasi unik yang disimpan secara lokal	boolean	'bawaan'	PALSU
diLayoutChange	Panggilan balik perubahan tata letak	(tata letak: LayoutsIF) => batal		PALSU
diReset	Hapus panggilan balik tombol	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => batal		PALSU
diRemoveWidget	Hapus panggilan balik applet	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => batal		PALSU
diAddWidget	Tambahkan panggilan balik ke program mini	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => batal		PALSU
diMuat Ulang	Segarkan panggilan balik tombol	(Layout saat ini: LayoutsIF) => batal		PALSU
diBatalSunting	Batalkan panggilan balik edit	(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => batal		PALSU
padaSunting	Masukkan panggilan balik edit	(Layout saat ini: LayoutsIF) => batal		PALSU
diSimpan	Simpan panggilan balik tombol	(Layout saat ini: LayoutsIF) => batal		PALSU
diKembalikan	Pulihkan panggilan balik tombol	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => batal		PALSU

Widget

Widget dapat berupa konten terbuka apa pun dan dapat diperluas secara bebas. File entri perlu mengekspor objek untuk mendeskripsikan widget. Format objeknya adalah sebagai berikut

Widget default pada dasarnya mengandalkan antd dan lebih sedikit. Perhatikan instalasi dependensi.

milik	keterangan	jenis	Nilai default	diperlukan
nama	Nama program mini	rangkaian		BENAR
keterangan	Deskripsi program mini	rangkaian		BENAR
tag	Tag, digunakan sebagai dasar klasifikasi untuk penyeleksi program mini	rangkaian[]		BENAR
komponen	Komponen program mini	Komponen|FungsiKomponen		BENAR
configComponent	Komponen konfigurasi yang sesuai dengan program mini	Komponen |.FungsiKomponen |		BENAR
panjang maksimal	Berapa kali maksimum applet ini dapat ditambahkan ke dasbor saat ini	nomor		BENAR
foto	Gambar snapshot program mini, digunakan untuk tampilan pemilih program mini	Sumber GambarBitmap		BENAR
ikon	Ikon program mini, digunakan untuk tampilan pemilih program mini	Elemen Reaksi		BENAR
ikonLatar Belakang	Latar belakang ikon program mini, digunakan untuk tampilan pemilih program mini	rangkaian		BENAR
ukuran	Informasi ukuran program mini	{Lebar Default: angka;Tinggi Default: angka;Lebar Maks: angka;Tinggi Maks: angka;LebarMin: angka;TinggiMin: angka}		BENAR

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

Tata Letak

Umumnya informasi tata letak tidak perlu terlalu diperhatikan, hanya perlu diserialkan dan disimpan dalam bentuk string. Jika Anda ingin mendapatkan data tata letak dasbor secara real time (misalnya saat menyetel tata letak default), Anda dapat fokus (klik mouse) ke yang sesuai Di dasbor, tekan tombol pintas Ctrl+Shift+C untuk menyalin data tata letak ke clipboard, dan panel konsol juga akan mencetak data tata letak.

milik	keterangan	jenis	Nilai default	diperlukan
Saya	Pengidentifikasi unik, dimulai dengan pengidentifikasi unik program mini diikuti dengan garis bawah, seperti 'widgetKey-1234567'	rangkaian		BENAR
w	Jumlah salinan lebar, total 12 eksemplar	nomor		BENAR
H	Jumlah salinan tinggi, 1 salinan sekitar 30px	nomor		BENAR
X	Posisi horizontal, total 12 eksemplar	nomor		BENAR
kamu	Posisi potret, 1 salinan sekitar 30px	nomor		BENAR
menitW	lebar minimum	nomor		BENAR
maksW	lebar maksimum	nomor		BENAR
H	tinggi minimal	nomor		BENAR
maksH	tinggi maksimum	nomor		BENAR

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

Metode

Contoh komponen dapat diperoleh melalui ref. Beberapa metode dan objek dom dipasang pada objek contoh, yang dapat dengan mudah memperluas Toolbar dan WidgetSelector yang disesuaikan.

milik	keterangan	jenis
dom	objek DOM	HTMLDivElement
tambahkanWidget	Tambahkan applet	(widget)=>batal
hapusWidget	Hapus applet	(i:widgetKey)=>batal
memuat ulang	menyegarkan	()=>batal
sunting	Masukkan edit	()=>batal
batalkanSunting	Batalkan pengeditan	()=>batal
kembali	mengatur ulang	()=>batal
menyimpan	menyimpan	()=>batal

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

Semua yang harus dilakukan

✅ configPanel

☑️ celah

☑️ tema modern

☑️ tema gelap

☑️ lebih banyak widget

✅ widget-cli

☑️Internasionalisasi

Akhir

• Setiap orang dipersilakan untuk menyampaikan masalah. Saya akan mencoba yang terbaik untuk mengatasi masalah Anda jika Anda memiliki kebutuhan.
• Saya akan terus mempertahankan proyek ini, semua orang dapat menggunakannya dengan percaya diri

Jika dirasa bermanfaat, silakan beri bintang.